切换字体真棒图像

时间:2016-11-04 18:11:20

标签: javascript jquery twitter-bootstrap

我有以下导航栏: -

<div id="sidebar-wrapper">
    <ul class="sidebar-nav nav-pills nav-stacked" id="menu">
        <li class="active" onclick="showMainDivision('legislate','bills','committees','favourites')">
            <a ng-click="getLegislators()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-user fa-stack-1x "></i></span>Legislators</a>
        </li>
        <li onclick="showMainDivision('bills','legislate','committees','favourites')" >
            <a ng-click="getActiveBill()"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-file-o fa-stack-1x "></i></span>Bills</a>
        </li>
        <li onclick="showMainDivision('committees','bills','legislate','favourites')" >
            <a ng-click="getCommittees()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-sign-in fa-stack-1x "></i></span>Committees</a>
        </li>
        <li onclick="showMainDivision('favourites','committees','bills','legislate');">
            <a ng-click="getFavourites()"><span class="fa-stack fa-lg pull-left"><i class="fa fa-star-o fa-stack-1x "></i></span>Favourites</a>
        </li>
    </ul>
</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="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>
        </li>
    </ul>
</div>

点击按钮我有以下javascript功能: -

$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled-2");
    $('#menu ul').hide();
});

事情是切换工作正常,但切换只是隐藏了li项目,i标签下的字体 - 真棒图像仍然可见。我希望他们和他们各自的李项目一起消失,他们应该在切换回来时回来。我很擅长任何帮助。

2 个答案:

答案 0 :(得分:2)

id="wrapper"没有元素 此外,我试图隐藏菜单,菜单下没有ul,它是同一级别。 $('#menu').hide();

答案 1 :(得分:0)

您正在以错误的方式使用bootstrap崩溃,您应该依靠其内置折叠功能 使用此refs: http://getbootstrap.com/javascript/#collapse

因此,简而言之,您不需要自己编写任何JS,只需更改以下内容:

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2" href="#sidebar-wrapper" aria-expanded="false" aria-controls="sidebar-wrapper">> <span class="fa-stack"> <i class="fa fa-bars fa-stack-2x "></i></span></button>

 <div id="sidebar-wrapper" class="collapse"> 

我认为你想要隐藏整个侧边栏包装器,如果不是这样的话那就把它应用到