Question

我正在尝试创建一个下拉菜单，到目前为止一直很顺利。我刚遇到一个问题。当我没有在菜单标题上徘徊时，下拉菜单会消失，菜单上的悬停效果也会消失。我的代码可能看起来很乱，有点复杂。我道歉。

JSFIDDLE：https://jsfiddle.net/eeLfkqjy/6/ HTML：

<div id="navBar">
        <div id="logo">

        </div>
        <div id="menu">
            <div id="menuTitle_Container">
                <a class="menuTitle" href="index.html">HOME</a>
                <a class="menuTitle" href="sneakers.html">MENU 1</a>
                <a class="menuTitle" href="clothing.html">MENU 2</a>
                <a class="menuTitle" href="acessories.html">MENU 3</a>
            </div>
        </div>
    </div>
        <div id="dropdownMenu">
            <div id="dropdownMenu_SubmenuContainer">
                <div class="submenu_Container">
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                            <a class="submenuTitle">MENU 5</a>
                    </div>
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                    </div>
                </div>                
                <div class="submenu_Container">
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                    </div>
                    <div class="submenu_menuContainer">
                        <p class="clotheCategory">TITLE</p>
                            <a class="submenuTitle">MENU 1</a>
                            <a class="submenuTitle">MENU 2</a>
                            <a class="submenuTitle">MENU 3</a>
                            <a class="submenuTitle">MENU 4</a>
                            <a class="submenuTitle">MENU 5</a>
                    </div>
                </div>
            </div>
        </div>

CSS：

body {
 margin: 0; 
 background-color: green;
}
/* MENU */
#navBar {
    background-color: #464646;
    height: 65px;
    width: 100%; 
    display: -webkit-box;
}
#logo {
    width: 15%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    height: 65px;
}
#menu {
    height: 65px;
    width: auto;
}
#menuTitle_Container{
    width: auto;
    display: -webkit-inline-box;
}
.menuTitle{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 17px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
    vertical-align: text-top;
    line-height: 65px;
    text-decoration: none;
    display: -webkit-block;
    display: block;
    transition: color 0.4s ease;
    transition: background-color 0.4s ease;
}
.menuTitle:nth-of-type(+n+2):hover {
    background-color: #fff;
    transition: background-color 0.4s ease, color 0.4s ease;
    color: #353535;
}

/* DROPDOWN MENU  ON HOVER */

#dropdownMenu {
    width: 750px;
    height: 250px;
    background-color: #fff;
    margin-left: 20%;
    display: none;
    opacity: 0;
}
#mensmenu {
    height: 100;   
}
.submenu_Container {
    width: 100%;
    margin: 0 auto;
    display: none;
}
.submenu_menuContainer {
    width: 50%;
    height: 190px;
    display: inline-block;
    margin-top: 30px;
    margin-left: 5%;
}
.submenu_menuContainer:nth-child(1) {
    border-right: 1px solid #B3B3B3;
}


.clotheCategory {
    font-family: 'open sans', sans-serif;
    font-size: 15px;
    color: #353535;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
}
.submenuTitle {
    font-family: 'open sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #353535;
    margin-top: 10px;
    display: table;
}

JQUERY：

$(document).ready(function() {
    $(".menuTitle:nth-child(2)").hover(function () {
        $("#dropdownMenu").show();
        $("#dropdownMenu").stop().animate({opacity:'1'}, 400);
        $(".submenu_Container:nth-child(1)").css("display","flex");
    }, function() {
        $("#dropdownMenu").hide();
        $("#dropdownMenu").stop().animate({opacity:'0'}, 400);
        $(".submenu_Container:nth-child(1)").css("display","none");
});    
    $(".menuTitle:nth-child(3)").hover(function () {
        $("#dropdownMenu").show();
        $("#dropdownMenu").stop().animate({opacity:'1'}, 400);
        $(".submenu_Container:nth-child(2)").css("display","flex");
    }, function() {
        $("#dropdownMenu").hide();
        $("#dropdownMenu").stop().animate({opacity:'0'}, 400);
        $(".submenu_Container:nth-child(2)").css("display","none");
});    
});

Answer 1

要轻松解决您的问题，您必须将npm install -g gulp事件附加到菜单项和下拉列表中。请参阅此Fiddle。

将此更改：hover更改为此$(".menuTitle:nth-child(2)").hover(...

但是您的网页上的所有ID都存在问题。每页的ID必须是唯一的，类可以在页面上多次发生。

这使得你的jquery选择器非常奇怪。 $(".menuTitle:nth-child(2), #submenu_Container:nth-child(1)").hover(...

但是对于简单的悬停，您应该尝试寻找纯CSS解决方案。但是你可能不得不改变一些标记。

Answer 2

我邀请您查看如何使用CSS

进行此操作

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

使用javascript进行悬停可能会导致悬停在手机或平板电脑上无法正确触发。

这是我在2分钟内制作的一个小菜单。 http://jsfiddle.net/warface/ky413pnk/

<强> HTML

<ul id="mainmenu">
    <li>Main Menu</li>
    <li>Menu 1
        <ul class="submenu">
            <li>Submenu 1</li>
            <li>Submenu 2</li>
        </ul>
    </li>
    <li>Menu 2</li>
</ul>

<强> CSS

#mainmenu{ list-style:none;  background:#000; color:#fff}
#mainmenu li{display:inline-block; position:relative; padding:4px 10px; border-right:1px solid #fff}

.submenu{display:none; background:#000; color:#fff; position:absolute; top:26px; left:0}
#mainmenu li:hover ul{display:block; margin:0; padding:0}
#mainmenu li ul li{white-space:nowrap; padding:4px 10px}

HTML / CSS / JQUERY - 当没有悬停在菜单上时，下拉消失

2 个答案: