Question

我需要的是我的下拉菜单中的平滑悬停效果。

$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);对我不起作用。当鼠标悬停时，效果不起作用。

$(document).ready(function () {
    // executes when HTML-Document is loaded and DOM is ready

    // breakpoint and up  
    $(window).resize(function () {
        if ($(window).width() >= 980) {
            // when you hover a toggle show its dropdown menu
            $(".navbar .dropdown-toggle").hover(function () {
                $(this).parent().toggleClass("show");
                $(this).parent().find(".dropdown-menu").toggleClass("show");
                $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
            });

            // hide the menu when the mouse leaves the dropdown
            $(".navbar .dropdown-menu").mouseleave(function () {
                $(this).removeClass("show");
            });
            // do something here
        }
    });
    // document ready  
    //wow.js init
    new WOW().init();
});

这是我的HTML标记。我正在使用bootstrap 4最新版本。如何使用jQuery或javascript实现平滑的悬停效果

<header class="header_area">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <a class="navbar-brand" href="#">Light House</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="single.html">Single Post</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                        <a class="dropdown-item" href="#">Item 4</a>
                        <a class="dropdown-item" href="#">Item 5</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact_us.html">Contact Us</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </nav>
</header>

Answer 1

.hover()有两个处理程序。鼠标IN和鼠标OUT。

如果您希望在鼠标输出时定义某些内容，则必须定义处理程序。

element.hover(mouseenter, mouseleave);

Documentation

所以我建议：

$(".navbar .dropdown-toggle").hover(

  // Mouseenter event handler
  function () {
    $(this).parent().toggleClass("show");
    $(this).parent().find(".dropdown-menu").toggleClass("show");
  },

  // Mouseleave event handler
  function(){
    $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
  }
);

Answer 2

如果您想使用.hover()，可以这样做：

$(".navbar .navbar-toggler").hover(function(e) {
  $(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
  $(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});

这有一个缺点，因为只要您移动鼠标单击或选择其中一个菜单项，它就会还原该类并隐藏。

对于所有情况，我建议你留在.click()。这适用于移动和桌面浏览器：

$(".navbar .navbar-toggler").click(function() {
  $(".navbar .navbar-collapse").toggleClass("collapse show");
});

工作示例：https://jsfiddle.net/4gas2aok/4/

如果您想保留淡入淡出，请使用.fadeToggle()：

$(".navbar .navbar-toggler").click(function() {
  $dropdown.fadeToggle(500).toggleClass("collapse show");
});

Bootstrap CSS已经解决了很多宽度问题，所以你不需要检查Window宽度，只需让bootstrap在它上面处理它。

完整示例：https://jsfiddle.net/4gas2aok/7/

为什么jQuery悬停效果不起作用？

2 个答案: