文章/答案/技术大牛

发布

社区首页 >问答首页 >如果单击其他nav，则移除类。

问如果单击其他nav，则移除类。
EN

Stack Overflow用户

提问于 2015-04-23 16:52:23

回答 2查看 1.4K关注 0票数 1

我有两个移动导航条在我的引导网站。我知道这不是最好的主意，但有了公司的设计，我别无选择。我需要帮助使图标翻转回向下的位置，当它关闭。我有一些脚本关闭一个，如果另一个导航按钮被点击，但字形图标不回翻。我知道这在更容易的方面，但我是相当新的引导和编写脚本。这是我的代码：

        <div class="header"><div class="container">
            <div class="col-sm-4 logo hidden-xs"><a href="/"><img class="img-responsive" title="Logo" src="images/Logo.png" alt=""></a></div>
                <div class="col-sm-4 login-wrapper hidden-xs">
                    <ul class="list-inline header-list">
                        <li>Login to sphere</li> 
                          <li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span></a><ul class="list-unstyled dropdown-menu" role="menu"><li><a href="#">sphere</a></li>
                              <li><a href="#">Trucks</a></li>
                              <li><a href="#">Transport</a></li>
                            </ul>
                          </li>
                    </ul>
                    <div class="clearfix"></div>
                      <form class="login-form" role="login">
                        <div class="form-group">
                          <input type="text" class="user-input form-control" placeholder="Username">
                          <input type="text" class="pass-input form-control" placeholder="Password">
                          <button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
                        </div>
                      </form></div>
                    <div class="col-sm-4 search-wrapper hidden-xs">
                      <form class="search-form" role="search">
                        <div class="form-group">
                          <input type="text" class="search-input form-control" placeholder="Search">
                          <button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button></div></form>
    </div>
    </div>
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container"><div class="navbar-header"><a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="Logo" src="images/Logo.png" alt=""></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1"><span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
                    </button>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
                        <span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
    </button>
    </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav">
            <form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
              <div class="form-group">
                <input type="text" class="search-input form-control" placeholder="Search">
                <button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
              </div>
            </form>
            <li class="active"><a href="#">ABOUT <span class="sr-only">(current)</span></a></li>
            <li><a href="#">RESOURCES</a></li>
            <li><a href="#">CONTACT</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES</a>
            <div class="dropdown-menu hover-dropdown hidden-xs hidden-sm">
            <div style="height:5px; background-color:#fff;"></div>
                <ul class="list-inline hidden-xs">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </div>       
          </li>
            <li><a href="#">PLACEHOLDER</a></li>
          </ul>

        </div><!-- /.navbar-collapse -->
        <div class="collapse navbar-collapse" id="navbar-collapse-2">
            <ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
                <li>
                  <ul class="header-list list-unstyled">
                    <li class="list-unstyled mobile">Login to sphere</li> 
                      <li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
                        <a  href="#" class="mobileDropdown dropdown-toggle mobile" data-toggle="dropdown" role="button" aria-expanded="false">Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span></a>
                        <ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
                          <li><a href="#">sphere</a></li>
                          <li><a href="#">Trucks</a></li>
                          <li><a href="#">Transport</a></li>
                        </ul>
                      </li>
                  </ul>
                </li>
                <div class="clearfix"></div>
                <form class="login-form" role="login">
                  <div class="form-group">
                    <input type="text" class="user-input form-control longin-control" placeholder="Username">
                    <input type="text" class="pass-input form-control login-control" placeholder="Password">
                    <button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
                  </div>
                </form>
            </ul>
        </div>
    </div><!-- /.container-fluid -->


    </nav>  
    </div>
    </div>
    <script>
           $('#navbar-collapse-1').on('shown.bs.collapse', function () {
           $(".myMenu-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
        });

        $('#navbar-collapse-1').on('hidden.bs.collapse', function () {
           $(".myMenu-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
        });

       $('#navbar-collapse-2').on('shown.bs.collapse', function () {
           $(".myLogin-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
        });

        $('#navbar-collapse-2').on('hidden.bs.collapse', function () {
           $(".myLogin-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
        });
                if( $('#navbar-collapse-1').hasClass('shown.bs.collapse') ){
                    (".myMenu-glyphicon").removeClass("glyphicon-menu-up");
            };
</script>

我试过这样做，但没有起作用。我想知道我是否应该创建一个引导程序？

<script>
// FLIP ALL THE GLYPHICONS NAVBAR

   $('#navbar-collapse-1').on('shown.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
    });

    $('#navbar-collapse-1').on('hidden.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
       $(this).addClass("dropdown-open");
    });


   $('#navbar-collapse-2').on('shown.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open");
    });

    $('#navbar-collapse-2').on('hidden.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
    });

    if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
    (".myMenu-glyphicon").removeClass("glyphicon-menu-up");
};
</script>

javascript

jquery

html

twitter-bootstrap-3

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-27 21:32:41

迈克尔，我想你知道你是这里的救星。我用你的代码找出了答案。我不知道我能清理多少，并确保它不需要很长时间来加载。我对Bootstrap和JavaScript非常陌生，但我认为这很管用。我在代码中遇到的唯一问题是，当单击另一个按钮时，它会隐藏该图标，即使单击了该特定按钮，该图标也会隐藏。这里是我如何做到这一点，再次请告诉我，如果有一个更容易的方式写这一点的逻辑，因为我相信有。非常感谢迈克尔在这个问题上的帮助！)

    <script>
    // FLIP ALL THE GLYPHICONS NAVBAR

   $('#navbar-collapse-1').on('shown.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open").removeClass("dropdown-closed");
       if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
          $(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
          $(".myLogin-glyphicon").addClass("glyphicon-menu-down");
          $("#navbar-collapse-2").removeClass("dropdown-open");
          $("#navbar-collapse-2").addClass("dropdown-closed");
       };
    });

    $('#navbar-collapse-1').on('hidden.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open").addClass("dropdown-closed");
    });


   $('#navbar-collapse-2').on('shown.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
       $(".myLogin-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open").removeClass("dropdown-closed");
       if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
          $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
          $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
          $("#navbar-collapse-1").removeClass("dropdown-open");
          $("#navbar-collapse-1").addClass("dropdown-closed");
       };
    });

    $('#navbar-collapse-2').on('hidden.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-up")
       $(".myLogin-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open").addClass("dropdown-closed");
       if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
          $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
          $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
       };
    });

</script>

票数 0

Stack Overflow用户

发布于 2015-04-23 17:04:11

我认为你的错误就在这部分：

if( $('#navbar-collapse-1').hasClass('shown.bs.collapse') ){
    (".myMenu-glyphicon").removeClass("glyphicon-menu-up");
};

shown.bs.collapse不是一个应用于元素的类，而是一个事件。

你走在正确的轨道上。您可以修改第一个导航条上的侦听器，以更改第一个导航条的类，以表示存在这样一个打开的nav，然后在第二个导航条代码中检查第一个导航条是否有下拉打开类。

<script>
// FLIP ALL THE GLYPHICONS NAVBAR

   $('#navbar-collapse-1').on('shown.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open");
    });

    $('#navbar-collapse-1').on('hidden.bs.collapse', function () {
       $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
       $(".myMenu-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open");
    });


   $('#navbar-collapse-2').on('shown.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
       $(".myLogin-glyphicon").addClass("glyphicon-menu-up");
       $(this).addClass("dropdown-open");
       if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
          $(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
       };
    });

    $('#navbar-collapse-2').on('hidden.bs.collapse', function () {
       $(".myLogin-glyphicon").removeClass("glyphicon-menu-up")
       $(".myLogin-glyphicon").addClass("glyphicon-menu-down");
       $(this).removeClass("dropdown-open");
       if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
          $(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
       };
    });

</script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29829826

复制

相似问题

问如果单击其他nav，则移除类。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果单击其他nav，则移除类。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果单击其他nav，则移除类。
EN