Bootstrap v3具有多個數據目標的導航欄切換不會切換「摺疊」類

Question

data-target屬性接受多個CSS選擇器以將摺疊應用於。如果只使用一個選擇器，那麼導航欄切換的「摺疊」類將通過非摺疊切換。但是，如果使用多個選擇器，則此行爲不起作用。在這種情況下，「摺疊」類總是存在。但是我需要在導航欄切換中改變「摺疊」類。

如果有人能幫忙，那將會很棒。無論是在與id一個div

<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

現在我做了一個小的重組，並將摺疊元素包裝在一個容器中。在我的情況下，它的工作原理：

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

Answer 2

包裝和使用class兩個數據的給出代碼嘗試使用數據父崩潰二者，讓我知道是不是爲你工作，

<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

我找到了一個解決方案，而重組的元素：

我用類選擇（「.navbar崩潰」）作爲數據目標，它的工作很好，但我面對與切換按鈕相同的問題。即「摺疊」類未被刪除 - 當多個目標被指定時，腳本找不到觸發元素。

根據源代碼上GitHub他們查找的觸發要素如下所示：

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

顯然，如果我們使用的元素ID或類選擇的昏迷分隔列表將無法正常工作data-target property。它將迭代所有元素，但不會找到匹配的觸發器按鈕。幸運的是，我發現了一個竅門。觸發選擇器檢查既和HREF屬性（使用OR邏輯運算符）的數據目標，因此，我們可以通過添加HREF屬性到肘節欺騙它按鈕，在我的示例代碼指向現有ID中的一個（#navbar OR #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> 

只有改變觸發鍵的屬性，代碼的其餘部分保持不變。