Javascript 带悬停的引导下拉列表

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

我已经设置了一个带有一些下拉菜单的导航栏（使用

class=“dropdown toggle”data toggle=“dropdown”

），它工作得很好

问题是它在“

onClick

”中起作用，而我更希望它在“

onHover

”中起作用

有什么内置的方法可以做到这一点吗？

在Twitter引导中，但您可以使用

更新1：

---

Sames问题

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

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

---

将鼠标悬停在导航项目上，查看它们是否在悬停时激活。

---

使用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);
    });  
});

---

您可以使用jQuery的悬停函数

您只需要在鼠标进入时添加类

open

，在鼠标离开下拉列表时删除类

这是我的密码：

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

---

最好的方法是用鼠标悬停触发引导单击事件。这样，它仍然应该保持触摸设备友好

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

所以你有这个代码：

<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>

这非常有效，下面是解释：我们有一个按钮和一个菜单。当我们将鼠标悬停在按钮上时，我们会显示菜单，当我们将鼠标移出按钮时，我们会在100毫秒后隐藏菜单。如果你想知道我为什么使用它，是因为你需要时间从菜单上的按钮拖动光标。当您在菜单上时，时间将重置，您可以在那里停留任意时间。当您退出菜单时，我们将立即隐藏菜单而不超时

---

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

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

CSS:

设置边距是为了避免不必要的关闭，边距是可选的

HTML:

...

---

如果要删除onclick open，请不要忘记删除按钮属性data toggle=“dropdown”，当输入附加了dropdown时，这也会起作用。

这就是我使用一些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');
    });
});

---

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

    $( 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' );
        }
    });

});

---

我尝试了其他解决方案，我使用的是Bootstrap3，但下拉菜单关闭得太快，无法在上面移动

假设您将class=“dropdown”添加到li，我添加了一个超时

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

---

对于CSS，当你点击它时，它会变得疯狂。这是我正在使用的代码，它也不会改变mobile view的任何内容

$('.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');
        }
    }
});

更新了一个合适的插件 我已经为下拉悬停功能发布了一个合适的插件，在该插件中，您甚至可以定义单击

下拉切换按钮时发生的情况：



既然已经有很多解决方案，为什么我要这么做？
我对以前存在的所有解决方案都有问题。简单的CSS没有使用
.dropdown
上的
.open
类，因此当下拉列表可见时，下拉切换元素将没有反馈

js按钮干扰了点击
。下拉按钮切换
，因此该下拉按钮在悬停时显示，然后在点击打开的下拉按钮时将其隐藏，移出鼠标将触发下拉按钮再次显示。一些js解决方案阻碍了iOS兼容性，一些插件无法在支持触摸事件的现代桌面浏览器上运行

这就是为什么我制作了一个插件，它只通过使用标准的引导javascript API来防止所有这些问题，而没有任何黑客攻击。
触发带有
悬停的
点击
事件有一个小错误。如果
鼠标进入
，然后单击
会产生相反的效果。当
鼠标移出时，它
打开
；当
鼠标移入时，它
关闭
。更好的解决方案：

    $('.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)
    });

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

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

$('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);
});

我提议的解决方案检测其非触摸设备和
导航栏切换（汉堡包菜单）是否不可见，并使父菜单项在悬停时显示子菜单，并在单击时跟随其链接

由于导航栏和某些浏览器中的菜单之间的间隙不允许您将鼠标悬停到子项，因此也会使页边距顶部为0


$（函数（）{
功能是触摸设备（）{
在窗口//中返回“ontouchstart”，适用于大多数浏览器
||navigator.maxTouchPoints；//适用于IE10/11和Surface
};
如果（！is_touch_device（）&&&$（'.navbar toggle:hidden'））{
$（'.dropdown menu'，this.css（'margin-top'，0）；
$（'.dropdown'）.hover（函数（）{
$（'.dropdown toggle'，this.trigger（'click'）.toggleClass（“禁用”）；
});			
}
});














引导下拉菜单在悬停状态下工作，并通过添加属性显示：块，在单击时保持关闭状态并从按钮标签中删除这些属性


。下拉：悬停。下拉菜单{
显示：块；
}

下拉示例





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> 

使用
mouseover（）
功能触发单击。这样，上一次单击事件将不会造成损害。用户可以使用悬停和单击/触摸。它将便于移动

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

比长时间的“完整构建”解决方案要好得多。只是
$('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);
});

        <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> 

        $(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
                    });                        
                } 
            );

        });

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