帶有鼠標懸停的導航欄和鼠標單擊兩者

Question

我正在使用引導響應式導航欄。 我想使鼠標懸停時導航欄下降。 當我調整屏幕大小並縮小瀏覽器大小時，當我單擊導航欄而不是將鼠標懸停時，下拉菜單具有相同的功能。

簡而言之，當瀏覽器為全尺寸時，下拉菜單將在鼠標懸停時起作用；當瀏覽器為小尺寸時，應在onclick上起作用。

這是我的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

請享用。