具有多个数据目标的 Bootstrap v3 导航栏切换不会切换类“折叠”

Posted 2023-03-29

【中文标题】具有多个数据目标的 Bootstrap v3 导航栏切换不会切换类“折叠”

【英文标题】：Bootstrap v3 Navbar-toggle with multiple data-targets don't toggle class "collapsed"

【发布时间】：2017-09-01 08:09:27

【问题描述】：

data-target 属性接受多个 CSS 选择器来应用折叠。如果只使用一个选择器，则 navbar-toggle 的“collapsed”类将通过 uncollapsing 进行切换。但如果使用多个选择器，则此行为不起作用。在这种情况下，类“collapsed”总是存在的。但我需要在导航栏切换中更改“折叠”类。

如果有人能帮忙就好了。

<div id="mainNav">
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar, #userPanel" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
        </button>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">
                    <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span>
                    <span class="navtext">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span>
                    <span class="navtext">About</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
</div>

<div id="userPanel" class="navbar-collapse collapse">
<ul>
    <li>Max Muster | 101945</li>
    <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li>
</ul>

【问题讨论】：

您可以使用class 并分配相同的class 然后data-target="same_class"

我已经试过了。折叠适用于两个目标，但导航栏切换中的“折叠”类不会在折叠/取消折叠时切换。看来这仅适用于一个 ID 作为数据目标...

【参考方案1】：

我找到了一个无需重构元素的解决方案：

我使用类选择器（“.navbar-collapse”）作为数据目标，它工作正常，但我在切换按钮时遇到了同样的问题。即未删除“collapsed”类 - 指定多个目标时脚本找不到触发元素。

根据GitHub 上的源代码，他们查找触发器元素如下：

this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                  '[data-toggle="collapse"][data-target="#' + element.id + '"]')

如果我们在 data-target 属性中使用逗号分隔的元素 ID 列表或类选择器，显然它不会起作用。它将遍历所有元素，但不会找到匹配的触发按钮。幸运的是，我刚刚发现了一个技巧。触发器选择器同时检查 data-target 和 href 属性（使用 OR 逻辑运算符），因此我们可以通过向切换按钮添加 href 属性来欺骗它，指向现有 ID 之一（ #navbar 或 #userPanel）在我的示例代码中我使用了第一个：

所以没有重组的解决方案是：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" href="#navbar" aria-expanded="false" aria-controls="navbar,userPanel">
    ...
</button>

仅更改触发按钮的属性，其余代码保持不变。

【参考方案2】：

使用id 将两者包装在一个 div 中，并使用class 作为给定代码的两个数据尝试使用 data-parent 折叠两者，让我知道它是否适合您，

<div id="wraper"> 
   <div id="mainNav">
      <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-parent="#wraper" data-target=".navbar_collapsed_data" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
        </div>

        <div class="navbar_collapsed_data navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span>
                        <span class="navtext">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span>
                        <span class="navtext">About</span>
                    </a>
                </li>
            </ul>
        </div>
      </nav>
    </div>

<div class="navbar_collapsed_data navbar-collapse collapse">
    <ul>
        <li>Max Muster | 101945</li>
        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout</a></li>
    </ul>
  </div>

【讨论】：

折叠工作，但导航栏切换中的“折叠”类不会在折叠/取消折叠时切换。

【参考方案3】：

现在我做了一个小的重组并将折叠元素包装在一个容器中。就我而言，它有效：

<nav class="navbar navbar-inverse">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-target="#collapseArea" data-toggle="collapse" aria-expanded="false" aria-controls="navbar">
       ...
      </button>
   </div>

   <div id="collapseArea" class="navbar-collapse collapse">
       <ul id="mainNav" class="nav navbar-nav">
          <li>...</li>
          <li>...</li>
       </ul>

       <div id="userPanel">
           <ul>
               <li>...</li>
               <li>...</li>
           </ul>
       </div>
   </div>
</nav>