Question

我正在使用bootstrap响应式导航栏。鼠标悬停时我想让导航栏下拉。当我调整屏幕大小并缩小浏览器大小时，当我点击导航栏而不是悬停时，下拉菜单功能相同。

简而言之，当完整尺寸的浏览器然后下拉鼠标悬停工作时，当浏览器尺寸较小时，它应该可以工作。

这是我的Html

<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div id="smNav" class="navbar-header">
<button  id="btnNav"  type="button" class="navbar-toggle collapsed"   data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" id="drpDown" class="dropdown-toggle"   data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 <ul id="drpItems" class="dropdown-menu" role="menu">
 <li id=""><a href="#">Action</a></li>
 <li id=""><a href="#">Another action</a></li>
 <li id=""><a href="#">Something else here</a></li>
 <li id="" class="divider"></li>
 <li id="" class="dropdown-header">Nav header</li>
 <li id=""><a href="#">Separated link</a></li>
 <li id=""><a href="#">One more separated link</a></li>
 </ul>

我尝试了两种方法，第一种方法是：

<script>
    val = 'clck';

    });

    switch (val) {

    case'hvr':
    {

    $('#drpDown').hover(function () {


    $('#drpItems').slideDown("fast");
    });

    $('#drpItems').mouseleave(function () {

    $('#drpItems').slideUp("fast");

    });
    break;
    }
    case 'clck':
    {


    $('#drpDown').click(function () {

    $('#drpItems').slideToggle("fast");
    });

    break;
                }

而另一个是....

    $('div.collapse ').click(function () {


    });
    $('div. navbar - collapse ul.nav li.dropdown').hover(function () {

    $('#drpDown').hover(function () {


    $('#drpItems').slideDown("fast")
    });

    $('#drpItems').mouseleave(function () {

    $('#drpItems').slideUp("fast");

    });

    });


    $('ul.nav li.dropdown').click(function () {


    $('#drpDown').click(function () {

    $('#drpItems').slideToggle("fast");
                             });

    });
</script>

Answer 1

GitHub上有一些很好的代码可以满足您的需求。

https://github.com/CWSpear/bootstrap-hover-dropdown

享受。

使用鼠标悬停和鼠标单击两者的导航栏

1 个答案: