提问人:Noobie 提问时间:10/1/2023 更新时间:10/4/2023 访问量:41
Bootstrap 导航栏中的二级菜单显示隐藏链接
Second level menu in Bootstrap navigation bar showing hidden links
问:
我在带有 C# 的 ASP.NET 应用程序中使用 Bootstrap。我有两级菜单,有些选项可供用户使用,有些选项可供管理员使用。母版页中的页面加载决定了在菜单中显示或隐藏链接的选项。它在桌面模式下工作正常,但在移动设备中,它也显示隐藏的链接,这些链接只能显示给管理员。
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton6" runat="server" Visible="false" PostBackUrl="#">Link 02</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" Visible="false" PostBackUrl="#">Link 03</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" Visible="false" PostBackUrl="#">Link 04</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" Visible="false" PostBackUrl="#">Link 05</asp:LinkButton>
</li>
<li class="nav-item dropdown">
<a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" Visible="false">Link With Sub Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#">Sublink 01</a>
<a class="dropdown-item" href="#">Sublink 02</a>
<a class="dropdown-item" href="#">SubLink 03</a>
</div>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" Visible="true" PostBackUrl="#">Link 06</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" Visible="False" OnClick="LinkButton3_Click">Link 07</asp:LinkButton>
</li>
</ul>
背后的代码是
if (Session["PersonType"] != null && Session["PersonType"].Equals("Admin"))
{
LinkButton1.Visible = false;
LinkButton2.Visible = false;
dropdown04.Visible = true;
LinkButton3.Visible = true;
LinkButton4.Visible = false;
LinkButton5.Visible = true;
LinkButton6.Visible = true;
LinkButton7.Visible = true;
}
else
{
LinkButton1.Visible = true;
LinkButton2.Visible = true;
LinkButton3.Visible = false;
LinkButton4.Visible = true;
LinkButton5.Visible = false;
LinkButton6.Visible = false;
LinkButton7.Visible = false;
dropdown04.Visible = false;
}
即使管理员未登录,也会显示 dropdown04 菜单项。但它仅在移动模式下显示,而不在桌面模式下显示。桌面模式工作正常。问题仅在移动模式下出现。
有些人建议将 data-toggle 添加到 data-bs-toggle 并将 data-target 添加到 data-bs-target,但它并没有为我解决问题,而是停止在移动视图中展开菜单。
答:
0赞
Noobie
10/4/2023
#1
原始代码具有具有 visible 属性的 a 元素。
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton6" runat="server" Visible="false" PostBackUrl="#">Link 02</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" Visible="false" PostBackUrl="#">Link 03</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" Visible="false" PostBackUrl="#">Link 04</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" Visible="false" PostBackUrl="#">Link 05</asp:LinkButton>
</li>
<li class="nav-item dropdown">
<a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" Visible="false">Link With Sub Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#">Sublink 01</a>
<a class="dropdown-item" href="#">Sublink 02</a>
<a class="dropdown-item" href="#">SubLink 03</a>
</div>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" Visible="true" PostBackUrl="#">Link 06</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" Visible="False" OnClick="LinkButton3_Click">Link 07</asp:LinkButton>
</li>
</ul>
经过反复试验,我将 visible 属性放在 li 元素中。并使其运行服务器。到目前为止,它正在工作。
<li class="nav-item dropdown" id="ddropDown04" runat="server" Visible="true">
<a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Link With Sub Menu</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="#">Sublink 01</a>
<a class="dropdown-item" href="#">Sublink 02</a>
<a class="dropdown-item" href="#">SubLink 03</a>
</div>
</li>
我背后的代码现在更改了 ddropDown04 的可见性。我从元素中删除了可见性元素。
评论