2

サイトのサイドバー ナビゲーションで、ドロップダウン メニューが機能しています。ただし、コードの状態 (閉じているか開いているか) に応じて、右向き<i class="icon-angle-right"></i>と下向きの間でアイコンを変更したいと考えています。<i class="icon-angle-down"></i>

メニューごとに繰り返されるコードは次のとおりです。

<!-- USER -->
<li class="nav-header">
    <a href="#" data-toggle="collapse" data-target="#userMenu">
    <font color="#333333">User</font> <i class="icon-angle-down"></i>
    </a>
    <ul style="list-style: none;" class="collapse in" id="userMenu">
        <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
        <li><a href="#"><i class="icon-envelope-alt"></i> Messages <span class="badge badge-info">4</span></a></li>
        <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
        <li><a href="#"><i class="icon-comment"></i> Shoutbox</a></li>
        <li><a href="#"><i class="icon-user"></i> Staff List</a></li>
        <li><a href="#"><i class="icon-flag"></i> My Infractions</a></li>
        <li><a href="#"><i class="icon-exclamation-sign"></i> Rules &amp; Regulations</a></li>
        <li><a href="#"><i class="icon-off"></i> Logout</a></li>
    </ul>
</li>
<!-- RADIO DJ -->
<li class="nav-header">
    <a href="#" data-toggle="collapse" data-target="#radioDJMenu">
    <font color="#34CCFF">Radio DJ</font> <i class="icon-angle-down"></i>
    </a>
    <ul style="list-style: none;" class="collapse" id="radioDJMenu">
        <li><a href="#">Information &amp; Stats</a></li>
        <li><a href="#">DJ Says</a></li>
        <li><a href="#">Request Line</a></li>
        <li><a href="#">Timetable</a></li>
        <li><a href="#">Banned Songs</a></li>
    </ul>
</li>
4

1 に答える 1

3

2018年更新

jQueryを使用してこれを行うことができます..

$('[data-toggle=collapse]').click(function(){
    $(this).find("i").toggleClass("icon-angle-right icon-angle-down");
});

折りたたみメニューに関する最後の質問から Bootply を更新します..
Bootstrap 3.x Toggle Icon Demo

概念はBootstrap 4と似ていますが、in現在showは であり、グリフィコンがなくなりました: https://www.codeply.com/go/bp/wS2OYMzQdr

于 2013-05-19T16:12:03.580 に答える