javascript - 使用下拉菜单操作 Bootstrap 导航，以便页面上始终显示 1 个下拉菜单

Question

我有一个标准的 Bootstrap (3.3.7) 导航项，带有 2 个下拉菜单。加载页面后，导航中的第一个下拉项应默认显示。当将鼠标悬停在第二个下拉菜单项上时，该项目现在应该是唯一公开的下拉菜单，直到再次将鼠标悬停在第一个下拉菜单上。单击页面上的任意位置不应关闭任何下拉菜单，并且单击下拉列表的名称(下拉列表 #1 等)必须充当链接。

我目前拥有它，因此默认情况下会公开导航，并且导航会在悬停时切换，但单击页面上的任意位置都会关闭下拉列表，我不知道如何覆盖它。另外，有没有更好的方法让第一个项目默认打开？

我的代码看起来像这样:

$(document).ready(function() {
    var $dropdown = $(".nav li.dropdown");
    $dropdown.first().addClass('open');
    $dropdown.hover(function() {
        if (!$(this).hasClass('open')) {
            $dropdown.removeClass('open');
            $(this).addClass('open');
        }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="collapse navbar-collapse" id="test-nav">
      <ul class="nav navbar-nav">
        
        <li class="dropdown">
          <a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown #1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown #2 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

      </ul>

</div><!-- /.navbar-collapse -->
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

您可以阻止 hide.bs.dropdown 的默认操作关闭(删除开放类)元素单击的当前下拉列表时。添加就足够了:

$dropdown.on('hide.bs.dropdown', function (e) {
    e.preventDefault();
})
$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
    $(this).closest('li.dropdown').toggleClass('open forceclose');
})

如果当前下拉列表具有强制关闭类，请避免将开放类添加到当前下拉列表中。

$(".nav li.dropdown").on('mouseenter', function (e) {
    if (!$(this).hasClass('open')) {
        $(".nav li.dropdown").removeClass('open');
        if ($(this).is('.forceclose')) {
            $(this).removeClass('forceclose');
        } else {
            $(this).addClass('open');
        }
    }
}).on('hide.bs.dropdown', function (e) {
    e.preventDefault();
}).first().addClass('open');


$(".nav li.dropdown ul.dropdown-menu").on('click', function (e) {
    $(this).closest('li.dropdown').toggleClass('open forceclose');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="collapse navbar-collapse" id="test-nav">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="false">Dropdown #1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="http://google.com" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="false">Dropdown #2 <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
    </ul>
</div>