【问题标题】:Navigation menu dropdown close on click单击时关闭导航菜单下拉菜单
【发布时间】:2015-09-24 06:42:11
【问题描述】:

我正在使用带有下拉菜单的引导导航菜单。单击一个菜单选项时,它的子菜单应该打开-完成。现在单击另一个菜单下拉菜单,前一个菜单也应该关闭-完成。现在如果 Home drop向下打开它的子​​菜单,如果我再次单击主页下拉菜单,它应该关闭。这就是我想要的。 我的代码如下:

<nav class="navbar easy-sidebar" >
    <div class="sample">
        <ul class="list-unstyled main-menu" ng-repeat="menu5 in indController.newArray">
            <li class="dropdown">
                <label class="navbar-collapse-btn" data-toggle="collapse" data-target=".{{menu5.mainMenu}}" id="nav-main">
                    {{menu5.mainMenu}}
                    <b class="menu-caret"></b>
                </label>
                <div class="{{menu5.mainMenu}} collapse" ng-repeat="menu1 in menu5.subMenus" >
                    <a href="#/{{menu1.sub_menu_link}}" class="list-group-item"  onclick="closenav()" ng-click="indController.showheader(menu1.sub_menu_header)">{{menu1.sub_menu_title}} </a>
                </div>
            </li>
        </ul>
    </div>
</nav>

//on clicking one dropdown,the other dd autocloses.
        $('.sample').click(function () {
            var $target = $($(this).data('target'));
            if (!$target.hasClass('in')){
                $('.sample .in').removeClass('in').height(0);
                }
                else{
                    $('.sample .in').addClass('in').height(0);
                }
        });

【问题讨论】:

  • 请在jsfiddle.net解决您的问题
  • 请向我们提供一个工作示例,正如 Insane Skull 所说。这样我们就可以确定问题所在了。
  • jsfiddle.net/1k7h5hzf 这是我的代码的样子。虽然它不起作用。因为我无法添加引导库文件。我想要的是当我点击设置时,它会打开,然后点击主页时,设置关闭并打开主页,现在主页已打开,当我再次点击主页时它应该关闭。

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

点击删除所有“in”类或打开菜单的类。像这样:

$('.dropdown').on('click', function(){
    $('.in').removeClass('in');
    // other things..
});

不要在 jquery 中使用高度来完成这项工作,最好使用类。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-17
    • 2012-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多