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

了解您的行动方式 - 您可能需要根据自己的目的略微修改

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

如果单击其中一个链接然后仅重新加载输出框

，则可以使小提琴工作

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

1 个答案: