Bootstrap导航栏二级菜单在移动端意外显示隐藏链接问题

问题背景 #

在基于C#的ASP.NET应用中，使用Bootstrap搭建两级导航菜单，通过母版页加载时判断用户类型（普通用户/管理员），控制菜单链接的显示与隐藏。桌面模式下功能正常，但移动端会出现权限泄露：本该仅管理员可见的链接（尤其是dropdown04的子菜单），在非管理员登录时仍会显示。尝试将data-toggle改为data-bs-toggle后，移动端菜单又无法展开，问题未解决。

前端代码 #

<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;
}

问题分析 #

1. 容器级可见性缺失：仅设置了dropdown的<a>标签Visible="false"，但包裹它的<li class="nav-item dropdown">未标记为服务器端控件，也未控制其可见性。非管理员时，该li元素仍会被渲染到页面，子菜单<div class="dropdown-menu">随之存在，移动端导航的交互逻辑可能绕过隐藏的a标签，触发子菜单显示。
2. Bootstrap版本不兼容：若使用Bootstrap 5，必须用data-bs-toggle替代data-toggle，但直接修改后菜单无法展开，大概率是未正确引入Bootstrap 5的JS文件（需要引入bootstrap.bundle.min.js包含Popper.js）。

解决方案 #

方案1：完善服务器端权限控制（推荐） #

将整个dropdown的<li>元素设置为服务器端控件，通过后端代码控制其可见性，确保非管理员时整个dropdown容器不被渲染：

<li class="nav-item dropdown" runat="server" ID="dropdownLi">
    <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>

修改后端代码，添加对dropdownLi的可见性控制：

if (Session["PersonType"] != null && Session["PersonType"].Equals("Admin"))
{
    LinkButton1.Visible = false;
    LinkButton2.Visible = false;
    dropdownLi.Visible = true; // 控制整个dropdown容器显示
    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;
    dropdownLi.Visible = false; // 控制整个dropdown容器隐藏
}

方案2：修复Bootstrap 5兼容性问题 #

如果项目使用Bootstrap 5，先确保正确引入依赖文件：

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 JS（包含Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

然后将dropdown的属性改为Bootstrap 5标准格式，同时保留服务器端可见性控制：

<li class="nav-item dropdown" runat="server" ID="dropdownLi">
    <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-bs-toggle="dropdown" aria-expanded="false">Link With Sub Menu</a>
    <ul class="dropdown-menu" aria-labelledby="dropdown04">
        <li><a class="dropdown-item" href="#">Sublink 01</a></li>
        <li><a class="dropdown-item" href="#">Sublink 02</a></li>
        <li><a class="dropdown-item" href="#">SubLink 03</a></li>        
    </ul>
</li>

方案3：前端临时隐藏（不推荐，仅应急） #

若无法修改服务器端代码，可通过CSS在移动端强制隐藏非管理员的dropdown：

@media (max-width: 991.98px) {
    .non-admin .dropdown-container {
        display: none !important;
    }
}

在母版页中根据用户类型给导航容器添加类：

if (Session["PersonType"] == null || !Session["PersonType"].Equals("Admin"))
{
    // 假设navbarNav是<ul class="navbar-nav">的服务器端ID
    navbarNav.Attributes.Add("class", "navbar-nav non-admin");
}

给dropdown的li元素添加对应类：

<li class="nav-item dropdown dropdown-container" runat="server" ID="dropdownLi">

内容的提问来源于stack exchange，提问作者Noobie