Question

我有一个带有可折叠侧边栏的引导页面。我的可折叠侧边栏工作正常，但我不知道如何更改切换图标onclick。

我的要求是：当您点击切换按钮时，应更改按钮图标。

这是我的代码：

$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function (e) {
    $(this).parent().find(".glyphicon-chevron-right").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left");

    e.preventDefault();

    $("#wrapper").toggleClass("toggled-2");
    $('#menu ul').hide();
});

HTML

<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
    <li>
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a>
        <ul class="nav-pills nav-stacked" style="list-style-type:none;">
            <li><a href="#">link1</a>
            </li>
            <li><a href="#">link2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a>
        <ul class="nav-pills nav-stacked" style="list-style-type:none;">
            <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a>
            </li>
            <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a>
            </li>
        </ul>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a>
    </li>
    <li> <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a>
    </li>
</ul>
</div>
<!-- /#sidebar-scroll -->
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="active">
            <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
        </li>
    </ul>
</div>
<!-- bs-example-navbar-collapse-1 -->

有谁知道怎么做？

这是我的：Fiddle

Answer 1

$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
    var icon = $(this).parent().find(".glyphicon")
    if (icon.hasClass('glyphicon-chevron-right'))
        icon.removeClass('glyphicon-chevron-right').addClass("glyphicon-chevron-left");
    else
        icon.removeClass('glyphicon-chevron-left').addClass("glyphicon-chevron-right");
});

这样的事情？

如何更改可折叠侧边栏切换图标

1 个答案: