4

ブートストラップnav-tabsnav-stackedリストがあります。これは、アコーディオンを使用して、最後にクリックされたリストまたはアクティブな子を持つリストを除くすべてのリストを折りたたむ必要があります。

私はこれをいくらか機能させていますが、クリックしない限りシェブロンの方向を変える方法を理解できないようです。

以前は、これはアコーディオンの折りたたみではなく、折りたたみを行うように設定されていました...したがって、完全に機能させるには、JavaScriptのアドバイスが必要です。

jsfiddle：http ://jsfiddle.net/utcwebdev/NBcmh/17/ （通常のブートストラップマークアップとカスタムブートウォッチ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');
});
4

5 に答える 5

3

ブートストラップ折りたたみプラグインがアコーディオンに完全に実装されていないようです。クリックされた要素に対してのみ、折りたたまれた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-27T08:28:58.857 に答える
1

Font Awesome 3.2.1を使用している場合は、cssで、以下を使用して変更を呼び出します。
.collapsed .icon-chevron:before {content: "\f078";} .icon-chevron:before {content: "\f077";}

于 2013-08-21T12:21:28.927 に答える
0

ソーディありがとうございます。これは、HTMLマークアップを変更する必要がなかった修正です。vartargetの前に次のjsを追加します。

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

このプロジェクトの開発者によるクレジット。

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

于 2013-04-01T16:07:13.263 に答える
0

アコーディオンに別のレベルを追加することは可能ですか？

<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-13T17:05:27.747 に答える
0

私は同様の問題に悩まされていましたが、アコーディオンの矢印を切り替えるための解決策を見つけることができましたが、アクティブな矢印を常に開いたままにして、他の矢印を折りたたむことができる方法がわかりません。

于 2013-07-11T17:24:06.657 に答える