javascript - 带悬停的引导下拉菜单

Question

好的，所以我需要的是相当简单的。

我已经设置了一个导航栏，其中包含一些下拉菜单（使用class="dropdown-toggle" data-toggle="dropdown"），它工作正常。

问题是它有效“ onClick”，而我更喜欢它是否有效“ onHover”。

有没有内置的方法可以做到这一点？

score 403 · Accepted Answer

最简单的解决方案是 CSS。添加类似...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

工作小提琴

score 71 · Accepted Answer

最好的方法是通过悬停触发引导点击事件。这样，它仍应保持对触摸设备友好

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

score 62 · Accepted Answer

您可以使用 jQuery 的悬停功能。

您只需要open在鼠标进入时添加类并在鼠标离开下拉菜单时删除类。

这是我的代码：

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

score 28 · Accepted Answer

使用 jQuery 的一种简单方法是：

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

score 9 · Accepted Answer

对于 CSS，当您也单击它时，它会变得疯狂。这是我正在使用的代码，它也不会改变移动视图的任何内容。

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

score 6 · Accepted Answer

在 Twitter Bootstrap中没有实现，但你可以使用这个插件

更新1：

同样的问题在这里

score 6 · Accepted Answer

将鼠标悬停在导航项目上以查看它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

score 6 · Accepted Answer

所以你有这个代码：

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

通常它适用于点击事件，您希望它适用于悬停事件。这很简单，只需使用以下 javascript/jquery 代码：

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

这很好用，解释如下：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，我们会显示菜单，当我们将鼠标悬停在按钮上时，我们会在 100 毫秒后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从按钮上拖到菜单上。当您在菜单上时，时间会被重置，您可以在此处停留任意时间。当您退出菜单时，我们会立即隐藏菜单，不会有任何超时。

我在很多项目中都使用过这段代码，如果您在使用它时遇到任何问题，请随时向我提问。

score 4 · Accepted Answer

这就是我用一些 jQuery 让它在悬停时下拉的东西

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

score 3 · Accepted Answer

使用适当的插件更新

我已经为下拉悬停功能发布了一个适当的插件，您甚至可以在其中定义单击dropdown-toggle元素时会发生什么：

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

当已经有很多解决方案时，为什么我做到了？

我对所有以前存在的解决方案都有疑问。简单的 CSS 不使用上的.open类.dropdown，因此当下拉列表可见时，下拉切换元素将没有反馈。

js 会干扰单击.dropdown-toggle，因此下拉菜单会在悬停时显示，然后在单击打开的下拉菜单时将其隐藏，移出鼠标将触发下拉菜单再次显示。一些 js 解决方案正在破坏 iOS 兼容性，一些插件无法在支持触摸事件的现代桌面浏览器上运行。

这就是为什么我制作了Bootstrap Dropdown Hover插件，它通过仅使用标准 Bootstrap javascript API 来防止所有这些问题，而无需任何黑客攻击。

score 3 · Accepted Answer

尝试使用带有淡入淡出动画的悬停功能

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

score 2 · Accepted Answer

这将帮助您为引导程序创建自己的悬停类：

CSS：

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

设置边距以避免不必要的关闭，它们是可选的。

HTML：

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

如果要删除 onclick open，请不要忘记删除按钮属性data-toggle="dropdown" ，当输入附加下拉菜单时，这也将起作用。

score 2 · Accepted Answer

这只会在您不在移动设备上时悬停导航栏，因为我发现悬停导航在移动设备上效果不佳：

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    });

});

score 2 · Accepted Answer

我尝试了其他解决方案，我正在使用引导程序 3，但下拉菜单关闭得太快而无法移动

假设您将 class="dropdown" 添加到 li，我添加了超时

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

score 2 · Accepted Answer

用 a触发click事件hover有一个小错误。If mouse-inand then aclick产生反之亦然的效果。它opens何时mouse-out何close地mouse-in。更好的解决方案：

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});

score 1 · Accepted Answer

    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

score 1 · Accepted Answer

Bootstrap 下拉菜单在悬停时工作，并通过添加属性display:block 保持点击关闭；在 CSS 中并从按钮标签中删除这些属性data-toggle="dropdown" role="button"

.dropdown:hover .dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>

score 1 · Accepted Answer

html

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div>

jQuery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

密码笔

score 0 · Accepted Answer

我提出的解决方案检测它是否不是触摸设备并且navbar-toggle（汉堡菜单）不可见，并使父菜单项在悬停时显示子菜单，并在 click 上点击其链接。

也使 tne margin-top 0 因为导航栏和某些浏览器中的菜单之间的间隙不会让您将鼠标悬停在子项上

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});

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

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

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

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

score 0 · Accepted Answer

使用mouseover()函数触发点击。这样之前的点击事件就不会有害了。用户可以同时使用悬停和点击/触摸。它将是移动友好的。

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

score 0 · Accepted Answer

您可以使用 Jquery 实现此功能：

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

score 0 · Accepted Answer

测试和工作正常

<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
  <div class="container" style="width:100%;">
    <div class="navbar-header" style="height:90px;">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>

      <a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
        <img src="material/logo.png" width="160px;" alt="visoka">
      </a>
      <a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
        <img src="material/logo.png" width="200px;">
      </a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
      <ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">

        <li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
        <li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>

        <li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
        <a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
          <li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
          <li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

  <script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}

function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>

javascript - 带悬停的引导下拉菜单

22 回答 22

使用适当的插件更新

当已经有很多解决方案时，为什么我做到了？

Related

Reference