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＆gt; li＆gt; a）后，立即崩溃整个第2级菜单（li class =“dropdown visible-xs”）。但是，我希望在单击第3级链接后保持打开状态。这是小提琴：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();
})

<强>更新

我已更新代码，以防止在网址为#或没有网址时滚动。这应该是为了达到目的

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

1 个答案: