使用下拉菜单操作引导导航，因此页面上始终显示 1 个下拉菜单

Question

我有一个带有 2 个下拉菜单的标准 Bootstrap (3.3.7) 导航项。加载页面后，默认情况下应显示导航中的第一个下拉项。当悬停在第二个下拉项目上时，该项目现在应该是唯一暴露的下拉菜单，直到第一个再次悬停在上面。单击页面上的任何位置不应关闭任何下拉菜单，并且单击下拉菜单的名称（Dropdown #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');
})

如果有类 forceclose，请避免将 open 类添加到当前下拉列表中。

$(".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>