無引導面板標記的Bootstrap Accordion

是否有任何可行的方法來創建自舉手風琴控制而不必使用'面板'標記？我有崩潰控制工作，但我希望能夠針對控制中的每個部分的父母。無引導面板標記的Bootstrap Accordion

換句話說，我希望「收入」和「保證金」存儲區互相切換，而「收入」裏面有「收入當前」，「收入基礎」和「收入電流與基本收入」切換彼此沒有干擾父層。

標記

<div class="group-by"> 
    <div class="jstree-preview group-dropdown"> 
     <ul id="j3_1"> 
      <li> 
       <span data-toggle="collapse" href="#collapse-j3_2" data-parent="#j3_1" aria-expanded="false" class="collapsed"> 
        <span>Revenue</span> 
        <i class="icon icon-arrow-right"></i> 
       </span> 
       <ul class="collapse" id="collapse-j3_2" aria-expanded="false" style="height: 0px;"> 
        <li> 
         <span data-toggle="collapse" href="#collapse-j3_3"> 
          <span>Revenue Current </span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_3"> 
          <li> 
           <span>Extended Zone Price</span> 
          </li>        
          <li> 
           <span>Net Amount</span> 
          </li>        
          <li> 
           <span>Revenue</span> 
          </li>        
          <li> 
           <span>Revenue Share at DN</span> 
          </li>        
         </ul> 
        </li> 

        <li> 
         <span data-toggle="collapse" href="#collapse-j3_8"> 
          <span>Revenue Base</span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_8"> 
          <li> 
           <span>Extended Zone Price</span> 
          </li>        
          <li> 
           <span>Net Amount</span> 
          </li>        
          <li> 
           <span>Revenue</span> 
          </li>        
          <li> 
           <span>Revenue Share at DN</span> 
          </li>        
         </ul> 
        </li> 

        <li> 
         <span data-toggle="collapse" href="#collapse-j3_13"> 
          <span>Revenue Current Vs Base</span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_13"> 
          <li> 
           <span>Matched Base Revenue</span> 
          </li>        
          <li> 
           <span>Matched Current Revenue</span> 
          </li>        
          <li> 
           <span>Matching %</span> 
          </li>        
          <li> 
           <span>New Sales Revenue</span> 
          </li>        
          <li> 
           <span>Non-Repeat Revenue</span> 
          </li>        
          <li> 
           <span>Normalized Base Revenue</span> 
          </li>        
          <li> 
           <span>Revenue Change %</span> 
          </li>        
          <li> 
           <span>Revenue Volume Change $</span> 
          </li>        
          <li> 
           <span>Total Revenue Change $</span> 
          </li>        
         </ul> 
        </li> 

       </ul> 
       <span data-toggle="collapse" href="#collapse-j3_23" data-parent="#j3_1" aria-expanded="false" class="collapsed"> 
        <span>Margin</span> 
        <i class="icon icon-arrow-right"></i> 
       </span> 
       <ul class="collapse" id="collapse-j3_23" aria-expanded="false" style="height: 0px;"> 
        <li> 
         <span data-toggle="collapse" href="#collapse-j3_24"> 
          <span>Margin Current</span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_24"> 
          <li> 
           <span>In-scope Margin Index</span> 
          </li>        
          <li> 
           <span>Margin</span> 
          </li>        
          <li> 
           <span>Margin %</span> 
          </li>        
          <li> 
           <span>Margin per Unit</span> 
          </li>        
         </ul> 
        </li> 

        <li> 
         <span data-toggle="collapse" href="#collapse-j3_29"> 
          <span>Margin Base</span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_29"> 
          <li> 
           <span>In-scope Margin Index</span> 
          </li>        
          <li> 
           <span>Margin</span> 
          </li>        
          <li> 
           <span>Margin %</span> 
          </li>        
          <li> 
           <span>Margin per Unit</span> 
          </li>        
         </ul> 
        </li> 

        <li> 
         <span data-toggle="collapse" href="#collapse-j3_34"> 
          <span>Margin Current Vs Base</span> 
          <i class="icon icon-arrow-right"></i> 
         </span> 
         <ul class="collapse" id="collapse-j3_34"> 
          <li> 
           <span>Margin % Change (bps)</span> 
          </li>        
          <li> 
           <span>Margin Volume Change $</span> 
          </li>        
          <li> 
           <span>Matched Base Margin</span> 
          </li>        
          <li> 
           <span>Matched Current Margin</span> 
          </li>        
          <li> 
           <span>New Sales Margin</span> 
          </li>        
          <li> 
           <span>Non-Repeat Margin</span> 
          </li>        
          <li> 
           <span>Normalized Base Margin</span> 
          </li>        
          <li> 
           <span>Total Margin % Change</span> 
          </li>        
          <li> 
           <span>Total Margin Change $</span> 
          </li>        
         </ul> 
        </li> 

       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

來源

2015-04-15 ascendantofrain

剛聽說從實際引導開發人員回話說，這是目前不可能的，但對於引導V4.0計劃功能。

來源

2015-04-15 17:41:28 ascendantofrain

這是不幸的，但它是相當瑣碎寫自己的jQuery來做到這一點。 – isherwood

我們可以用這個工作**使用Jquery **，檢查[this]（http://stackoverflow.com/a/11479208/2218697）的帖子。 – stom

這將做的工作

$("a[data-parent='#j3_1']").on("click", function() { 
    var current = $(this).attr("href"); 
    current = $(current); 
    $(".collapse.toplevel").each(function() { 
    if (!$(this).is(current)) { 
     $(this).collapse('hide'); 
    } 
    }); 
});

重命名爲

來源

2015-08-05 19:18:12 Tim

引導3.x版本需要panel類添加到data-parent內toggler + togglee的容器。

在您的示例中，可以通過將class="panel"添加到<li>元素的第一個和第二個深度來完成此操作。我做了使用您的代碼在這裏一個例子： http://www.bootply.com/15nIagFMbk

在一個簡單的例子：

<ul id="accordion"> 
    <li class="panel"> 
     <a href="#c1" data-toggle="collapse" data-parent="#accordion" class="collapsed"> 
      Toggle 1 
     </a> 
     <p id="c1" class="collapse"> 
      Some collapsable text 1 
     </p> 
    </li> 
    <li class="panel"> 
     <a href="#c2" data-toggle="collapse" data-parent="#accordion" class="collapsed"> 
      Toggle 2 
     </a> 
     <p id="c2" class="collapse"> 
      Some collapsable text 2 
     </p> 
    </li> 
    <li class="panel"> 
     <a href="#c3" data-toggle="collapse" data-parent="#accordion" class="collapsed"> 
      Toggle 3 
     </a> 
     <p id="c3" class="collapse"> 
      Some collapsable text 3 
     </p> 
    </li> 
</ul>

來源

2016-07-15 12:21:07

太簡單了。爲什麼我沒有想到這個？很好的答案。完美的作品 –

無引導面板標記的Bootstrap Accordion

回答

相關問題