html - 当单击或导航到该元素时，始终显示 Bootstrap 下拉列表元素

Question

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

我有一个两级 Bootstrap 菜单。我希望当选择并导航到一个元素时，始终显示该元素所在的下拉列表。这是我的代码的简化版本:

<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 页面处于事件状态时，我想显示下拉菜单。它目前所做的只是显示顶级菜单。因为它是一个 Bootstrap 下拉菜单，所以默认情况下会显示，这是下拉菜单应该工作的正确方式。不确定我是否可以让它动态显示。无论用户是否单击它或该页面上的任何其他内容，都应始终显示它。

我在 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，并检查它是否包含在页面链接中。如果其中任何一个匹配，下拉列表将被设置为显示。由于 bootstrap 使用 visibility 而 show() 使用 display:block，show() 应该覆盖 visibility: hidden 当你停止悬停时

看看你的进展情况——你可能需要根据自己的目的稍微修改一下

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

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