单击链接后防止子菜单折叠（Bootstrap 3.1.1）

Question

我的引导菜单如下（这是许多菜单项中的一个的代码 sn-p）：

<!-- 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") 立即折叠。但是，我希望在单击第三级链接后保持打开状态。 这是小提琴：http://jsfiddle.net/dk49/ugzwmhm6/ 有什么建议吗？

谢谢。

Answer 1

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

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

此代码将停止将anchor 标记传播到其父级

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

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

更新

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