Question

data-target属性接受多个CSS选择器以应用折叠。如果只使用一个选择器，则该类＆＃34;折叠＆＃34; navbar-toggle是通过uncollapsing来切换的。但如果使用多个选择器，则此行为不起作用。在这种情况下，课程＆＃34;崩溃＆＃34;永远存在。但我需要改变班级＃34;倒塌＆＃34;在navbar-toggle中。

如果有人可以提供帮助，那就太棒了。

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

Answer 1

我找到了一个没有重组元素的解决方案：

我使用了类选择器（“ .navbar-collapse ”）作为数据目标，它运行正常，但我遇到了与切换按钮相同的问题。即，未删除“ 折叠 ”类 - 当指定了多个目标时，脚本无法找到触发元素。

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

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

显然，如果我们在 data-target 属性中使用逗号分隔的元素ID列表或类选择器，它将无效。它将遍历所有元素，但不会找到匹配的触发按钮。幸运的是，我发现了一个技巧。触发器选择器同时检查 数据目标 和 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>

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

Answer 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>

Answer 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>

Bootstrap v3使用多个数据目标的Navbar-toggle切换类＆＃34;折叠＆＃34;

3 个答案: