Question

我有一个正在开发的网站看起来很好，但我遇到的问题只出现在折叠菜单中，而且只出现在主页上。

在主页上有一个全宽幻灯片，如果我尝试导航到下拉项目，例如画廊，则菜单关闭。这不是任何其他页面上的问题，我发现很难调试。

http://test.forthwebsolutions.com

Answer 1

这是使用data-toggle="dropdown"的非常常见的Twitter Bootstrap行为。

要避免这种情况，最简单的技巧是 - 在内部下拉菜单中附加点击事件处理程序，只需添加event.stopPropagation()即可。像这样。

$('li.dropdown.inside-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

显然，你需要将我上面提到的类添加到内部下拉菜单中。例如：

<li class="dropdown inside-dropdown-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Galleries <i class="fa fa-angle-down"></i></a>
    <ul class="dropdown-menu open">
        <li><a href="/gallery.php">Image Gallery</a></li>
        <li><a href="/video_gallery.php">Video Gallery</a></li>
    </ul>
</li>

其他信息：如果您感到好奇，如果您不想使用here in this SO thread提及的event.stopPropagation()

，还有替代方法

bootstrap 3，幻灯片显示折叠菜单的问题

1 个答案: