单击链接后防止子菜单折叠(Bootstrap 3.1.1) [英] Prevent Sub-menu from collapsing after clicking on link (Bootstrap 3.1.1)

问题描述

我的引导菜单如下(这是许多菜单项中的一个的代码片段):

<!-- 导航菜单代码(移动)--><nav class="navbar navbar-default" role="navigation"><div class="container commonWidth"><button type="button" style="width: 100%" class="navbar-toggle" data-toggle="collapse" data-target="#led-collapse">LED &照明 <b class="caret"></b><!-- 收集导航链接以进行切换--><div class="collapse navbar-collapse hidden-sm" id="led-collapse"><ul class="nav navbar-nav"><li class="下拉可见-xs"><a href="#" class="dropdown-toggle" data-toggle="dropdown">LED 灯<b class="caret visible-xs"></b></a><ul class="下拉菜单"><li><a href="#">LED 灯 &管</a></li><li><a href="#">筒灯、聚光灯&COB</a></li><li><a href="#">LED 面板</a></li><li><a href="#">LED 表面</a></li><li><a href="#">商业&工业</a></li><li><a href="#">LED GU10 配件</a></li><li><a href="#">LED灯条</a></li><li class="下拉可见-xs"><a href="#" class="dropdown-toggle" data-toggle="dropdown">灯具(配件)<b class="caret visible-xs"></b></a><ul class="下拉菜单"><li><a href="#">国内管件</a></li><li><a href="#">泛光灯</a></li>

<!-- 结束 LED 菜单-->

<!-- 结束 commonWidth --></nav>

问题在于，在单击三级链接(.dropdown-menu > li > a)后，整个二级菜单(li class="dropdown visible-xs")立即崩溃.但是，我希望在单击第三级链接后保持打开状态.这是小提琴:http://jsfiddle.net/dk49/ugzwmhm6/有什么建议吗?

谢谢.

解决方案

一旦 economy 链接被点击，click 事件 就会传播到它的父级，从那里它转到下一个父级，依此类推.当它到达第三个父元素时，第三个父元素通过切换开放类对其做出反应.因此，如果您停止传播，它将保持原样.试试下面的代码.

$('.dropdown-menu a').click(function(e){e.stopPropagation();})

此代码将阻止 anchor 标签向其父标签的传播

如果您想阻止默认点击操作，请使用

$('.dropdown-menu a').click(function(e){if($(this).attr('href') == "#" || $(this).attr('href') == "")//新代码e.preventDefault();e.stopPropagation();})

更新

我已更新代码以防止在 URL 为 # 或没有 URL 时滚动.这应该达到目的

My bootstrap menu is as follows (this is the code snippet for one menu-item out of many):

<!-- Code for Navigable menu (mobile) -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container commonWidth">

    <button type="button" style="width: 100%" class="navbar-toggle" data-toggle="collapse" data-target="#led-collapse">
        LED & Lighting <b class="caret"></b>
    </button>

    <!-- Collect the nav links for toggling -->                        
    <div class="collapse navbar-collapse hidden-sm" id="led-collapse">
        <ul class="nav navbar-nav">

            <li class="dropdown visible-xs">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">LED Lights<b class="caret visible-xs"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">LED Lamps & Tubes</a></li>
                    <li><a href="#">Downlights, Spotlights & COB</a></li>
                    <li><a href="#">LED Panels</a></li>
                    <li><a href="#">LED Surface</a></li>
                    <li><a href="#">Commercial & Industrial</a></li>
                    <li><a href="#">LED GU10 Fittings</a></li>
                    <li><a href="#">LED Strips</a></li>
                </ul>
            </li>

            <li class="dropdown visible-xs">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Luminaires (Fittings)<b class="caret visible-xs"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Domestic Tube Fittings</a></li>
                    <li><a href="#">Floodlights</a></li>
                </ul>
            </li>

        </div>   <!-- End LED Menu -->
    </div> <!-- End commonWidth -->        
</nav>

The issue is that immediately after clicking a 3rd level link (.dropdown-menu > li > a), entire 2nd level menu (li class="dropdown visible-xs") collapses. However, I want this to stay open after the 3rd level link is clicked. Here is the fiddle: http://jsfiddle.net/dk49/ugzwmhm6/ Any Suggestions?

Thanks.

解决方案

Once the economy link is clicked the click event is getting propagated to its parent, from there it goes to the next parent and so on . when it reaches the third parent, the third parent element is reacting to it by toggling the open class. So if you stop the propagation it will stay as it is. Try the code below.

$('.dropdown-menu a').click(function(e){
    e.stopPropagation();
})

This code will stop the propagation of the anchor tag to its parent

In case if you want to prevent the default click action use

$('.dropdown-menu a').click(function(e){
    if($(this).attr('href') == "#" || $(this).attr('href') == "") // New code
        e.preventDefault();
    e.stopPropagation();
})

Update

I have updated the code to prevent scrolling if the URL is # or if there is no URL. this should serve the purpose

这篇关于单击链接后防止子菜单折叠(Bootstrap 3.1.1)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！