Bootstrap手風琴導航與下拉圖標雪佛龍

我有一個引導nav-tabs導航堆疊列表，需要使用手風琴摺疊除最近點擊，或與活躍的孩子以外的所有列表。Bootstrap手風琴導航與下拉圖標雪佛龍

我有這個工作有點，但似乎無法弄清楚如何得到雪佛龍改變方向，除非點擊。

我以前只有這樣做才能做到崩潰，而不是摺疊手風琴...所以需要一些javascript的建議來使其功能完整。

的jsfiddle：http://jsfiddle.net/utcwebdev/NBcmh/17/ （使用正常的引導標記以及自定義bootswatch CSS主題）

這裏的標記：

<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked"> 
    <li> 
     <a href="department-mathematics.php"><i class="icon-home"></i> Mathematics</a> 
    </li> 
    <li> 
     <a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Programs </a> 
      <ul id="subnav01" class="nav nav-list collapse"> 
      <li><a href="#1"><i class="icon-home"></i> Programs Home</a></li> 
      <li><a href="#2">Undergraduate Program</a></li> 
      <li><a href="#3">Graduate Program</a></li> 
      <li><a href="#4">Undergraduate Program</a></li> 
      <li><a href="#5">Math Plaza</a></li> 
      <li><a href="#6">UTeaChattanoga</a></li> 
      <li><a href="#7">Placement Criteria</a></li> 
      <li><a href="#8">Step Ahead Math</a></li> 
      </ul> 
    </li> 
    <li> 
     <a href="#page">A Single Math Page</a> 
    </li> 
    <li> 
     <a href="#li03" data-toggle='collapse' data-target='#subnav02', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Student Resources</a> 
      <ul id="subnav02" class="nav nav-list collapse"> 
      <li><a href="#pimu">Pi Mu Epsilon</a></li> 
      <li><a href="#schol">Scholarships and Awards</a></li> 
      <li><a href="#links">Math Links</a></li> 
      <li><a href="#advise">Advisement</a></li> 
      </ul> 
    </li> 
    <li> 
     <a href="directory.php"><i class="icon-group"></i> Staff Profiles</a> 
    </li> 
</ul>

而這裏的JavaScript的：

$(document).on('click', '.accordion-toggle', function(event) { 
    event.stopPropagation(); 
    var $this = $(this); 

    var parent = $this.data('parent'); 
    var actives = parent && $(parent).find('.collapse.in'); 

    // From bootstrap itself 
    if (actives && actives.length) { 
     hasData = actives.data('collapse'); 
     //if (hasData && hasData.transitioning) return; 
     actives.collapse('hide'); 
    } 

    var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

    $(target).collapse('toggle'); 
});

來源

2013-03-26 PlayGod

謝謝sody。這是一個不需要更改HTML標記的修復程序。在var目標之前添加以下js：

$(parent).find('.accordion-toggle').not($(event.target)).addClass('collapsed');

由於此項目的開發人員而感到的榮譽。

http://jsfiddle.net/utcwebdev/NBcmh/24/

來源

2013-04-01 16:07:13 PlayGod

但是，如果你有像來自'手風琴組引導文件的CSS類的標記'等等，所有的js工作都是通過引導插件完成的。在這種情況下，bootstrap中存在一個錯誤，需要進行一些工作。但最好的選擇是儘可能使用引導現有的代碼。這個錯誤將在不久的將來得到修復，我相信。但它將採用'accordion-group'類的相同風格。 – sody 2013-04-01 20:59:49

如果您不依賴'data-parent'屬性，它將不適用於嵌套式手風琴。我剛剛更新了答案，您可以從這裏獲取代碼作爲示例。 – sody 2013-04-01 21:03:40

感謝您提供詳細信息和解釋。在將來的某個時候，我需要爲額外的導航項目添加嵌套的手風琴......但是可能會等到bootstrap bug被壓扁。 – PlayGod 2013-04-19 13:40:02

似乎該引導程序崩潰插件沒有完全實現手風琴。它只爲單擊的元素切換摺疊的CSS類。

$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { 
    var $this = $(this), href 
     , target = $this.attr('data-target') 
     || e.preventDefault() 
     || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 
     , option = $(target).data('collapse') ? 'toggle' : $this.data() 

    // this line 
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') 

    $(target).collapse(option) 
    })

UPD 爲了解決這個問題，你只需要找到所有的開關按鈕和做同樣與他們：

$(document).on('click.collapse.data-api', '.accordion-toggle', function(event) { 
    var $this = $(this), 
     parent = $this.data('parent'), 
     $parent = parent && $(parent); 

    if ($parent) { 
     $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed'); 
    } 
});

而且不要忘了加accordion-group類。

http://jsfiddle.net/NBcmh/29/

來源

2013-03-27 08:28:58 sody

是否有可能增加另一個層次手風琴？

<li> 
    <a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed"> 
     <i class="icon-chevron-up pull-right"></i>Page 2 </a> 
     <ul id="subnav01" class="nav nav-list collapse"> 
     <li><a href="#1">Page 2.1</a></li> 
     <li><a href="#" data-toggle='collapse' data-target='#subnav01.1', data-parent='#sidenav01.1' class="accordion-toggle collapsed"> 
      <i class="icon-chevron-up pull-right"></i>Page 2.2</a> 
      <ul id="subnav01.1" class="nav nav-list collapse"> 
       <li><a href="#1">Sub-level 1</a></li> 
       <li><a href="#2">Sub-level 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#6">Page 2.3</a></li> 
     </ul> 
</li>

我添加了這部分的html，但沒有顯示它。

http://jsfiddle.net/labanino/G3PqR/12/

來源

2013-05-13 17:05:27 Labanino

對於這部手風琴...不。它只用於單個subnav。但是如果你爲了更高的水平而改進它，請在這裏記下你的工作。 – PlayGod 2013-07-11 19:55:27

我被困在一個類似的問題，但是我設法找到手風琴箭頭的解決方案進行切換，但我想不出如何保持活躍的一個常開，同時能夠瓦解其他。

來源

2013-07-11 17:24:06 user1467439