javascript - 单击链接后防止子菜单折叠(Bootstrap 3.1.1)

Question

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

<!-- 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>

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

谢谢。

Answer 1

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

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

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

如果你想阻止默认的点击 Action 使用

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

更新

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