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

我正在使用引导响应导航栏。我想让导航栏在鼠标悬停时下降。当我调整屏幕大小并缩小浏览器大小时，当我点击导航栏而不是鼠标悬停时，同样的下拉功能也会起作用

简而言之，当浏览器的大小达到最大时，鼠标悬停在下拉菜单上；当浏览器的大小达到最小时，鼠标悬停在下拉菜单上；当浏览器的大小达到最小时，鼠标悬停在下拉菜单上，鼠标悬停在下拉菜单上；当浏览器的大小达到最小时，鼠标悬停在下拉菜单上，鼠标悬停在下拉

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

---

GitHub上有一段很好的代码，可以满足您的需要

---

享受。

移动设备中没有事件悬停，这就是为什么悬停事件转换为单击触摸。您能编辑代码使其可读吗？触摸设备上没有悬停，这就是为什么引导仅为单击。屏幕大小并不决定它是否为触摸设备。平板电脑可以和桌面设备一样大。我的鼠标悬停可以工作，也可以单击，但问题是，当我缩小浏览器尺寸时，鼠标悬停可以工作，而我只想在浏览器尺寸较小时使用鼠标悬停功能。我想你应该能够更改引导css，以便处理小屏幕尺寸的鼠标悬停。这只是鼠标悬停，当浏览器大小已满时，我希望悬停，但当我缩小浏览器大小时，应在单击下拉列表时转换相同的悬停功能