当单击或导航到该项目时，始终显示引导下拉列表项目

Question

类似于：How to Display Selected Item in Bootstrap Button Dropdown Title

我有一个两级引导菜单。我希望在选择并导航到某个项目时，始终显示该项目所在的下拉列表。这是我的精简版代码：

<ul class="menu-system">
<li class="active">
<a href="#">Location</a>
</li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown"> Top level Option 1</a>
    <ul class="dropdown-menu">
        <li><a href="#"> Option 1</a></li>
        <li><a href="#"> Option 2</a></li>
        <li><a href="#"> Option 3</a></li>
        <li><a href="#"> Option 4</a></li>
    </ul>
</li>

示例：当顶级选项 1> 选项 1 页面处于活动状态时，我想显示下拉菜单。它目前所做的只是显示顶级菜单。由于它是一个引导下拉菜单，因此默认情况下会显示这是下拉菜单应该工作的正确方式。不知道我是否可以让它动态显示。无论用户是否单击它或该页面上的任何其他内容，都应始终显示此内容。

我正在使用 ASP.NET 应用程序。我不确定这与活动标签有关，或者我是否必须编写一些 javascript/jquery 代码来获取当前页面并显示适当的下拉菜单。

非常感谢任何帮助。

JSFiddle：jsfiddle.net/yZ8C6

Answer 1

好吧，我先说我无法让它在 jsfiddle 中正常工作，因为当点击命名链接时它不会重新加载页面，但我相信这应该会有所帮助

$('.dropdown-menu li a').each(function() {
    if($(location).attr('href').indexOf($(this).attr('href')) > 0) {
         $('.dropdown-menu').show();
    } 
});

所以我们在这里所做的是检查每个列表项上的链接 href 并检查它是否包含在页面链接中。如果其中任何一个匹配，下拉菜单将设置为显示。由于引导程序使用visibility 和show() 使用display:block，当您停止悬停时，show() 应该覆盖visibility: hidden

看看你是怎么做的——你可能需要根据自己的目的稍微修改一下

http://jsfiddle.net/yZ8C6/1/

如果您单击其中一个链接然后仅重新加载输出帧，您可以让小提琴工作