2

描述：我构建了一个菜单，当用户将鼠标悬停在菜单上时会显示一个子菜单。（菜单使用 jQuery）。此外，我的菜单设置方式是，如果用户将鼠标悬停在菜单上的某个 div 上，jQuery 会采用该 div 名称并附加一个子菜单 id，它告诉 jQuery 要显示哪个子菜单 div。

使用的 jQuery：

$(function() {
    $('#nav div').hover(function() {
        var menu_name = $(this).attr('id');   //gets current div id
        sub_menu_name = '.sub_' + menu_name;  //creates the sub menu that matches that div menu
        $(sub_menu_name).css('display', 'block');
    }, function () {
        $(sub_menu_name).css('display', 'none');
    });     
});

Jsfiddle 链接：请查看：

[1]： http: //jsfiddle.net/tech_noob/nXR5Y/1/查看我用于此菜单的所有代码。

问题：当用户将鼠标悬停在菜单之外并尝试将鼠标悬停在子菜单上时，子菜单也会消失。如果用户将鼠标悬停在子菜单上，我希望子菜单保持原位，并且仅当用户悬停在子菜单之外或移动到新菜单链接时才会消失。如果可能的话，我还想保留我在 HTML 中使用的代码结构（例如，我见过其他菜单，其中开发人员将子菜单用作相应菜单链接父项的子菜单）。

旁注：我本地主机中的 UI 在其各自的菜单链接下显示子菜单，在 jsfiddle 上，子菜单已关闭。不知道确切原因，但这是一个小问题。

4

4 回答 4

2

你自己把这件事复杂化了。这可以而且应该使用不同的 HTML（嵌入式 UL）和 CSS 来完成，根本不需要 jQuery。请看我的例子，它使用更少的代码并且是 CSS 驱动的。

HTML：

<ul id="nav">
    <li>Menu 1
        <div>
            <ul>
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </div>
    </li>
    <li>Menu 2
        <div>
            <ul>
                <li><a href="#">Sub Menu Item A</a></li>
                <li><a href="#">Sub Menu Item B</a></li>
                <li><a href="#">Sub Menu Item C</a></li>
            </ul>
        </div>
    </li>
    <li>Menu 3
        <div>
            <ul>
                <li><a href="#">Sub Menu Item X</a></li>
            </ul>
        </div>
    </li>
</ul>

CSS：

body,
html {
    padding: 10px;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 0;
}
#nav {
    position: relative;
    height: 30px;
    float: left;
    cursor: default;
}
#nav > li {
    font-size: 120%;
    font-weight: bold;
    background: #ccc000;
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    border: 1px solid #000;
    line-height: 2.2;
}
#nav > li > div {
    position: absolute;
    left: 0;
    top: 50px;
    padding: 10px 0;
    width: 100%;
    font-weight: normal;
    font-size: 80%;
    display: none;
}
#nav > li:hover > div {
    display: list-item;
}
#nav > li > div > ul {
    background: orange;
    width: 250px;
    border: 1px solid #000;
    text-align: left;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: #000;
}
于 2013-07-10T16:29:41.437 回答
1

它比你所拥有的要长一点，但它可以处理所有你应该需要它处理的菜单和子菜单，只要你维护这些名称。如果您更改名称，那么您将需要更改代码。

例子

//  a little prep work would really help make this easier
//  something like:
var tmrMenu;    //  used to keep submenu open long enough for hover over
//  select only menu items via class name
//  and add data variable containing the element you want
//      you could also hard code this in HTML like: <div data-sub-menu=".sub_menu_1" ...
//      and later select it using something like: $($('menu_1').data('sub-menu'))
$("#nav [class^='menu_']").each(function(i) { $(this).data('subMenu', $('#nav .sub_' + $(this).attr('id'))); })
//  now each menu has its sub-menu directly associated
//  we continue the chain
.on('mouseenter', function(e) {
    clearTimeout(tmrMenu); // clears hiding timer
    var sub = $(this).data('subMenu');
    $("#nav [class^='sub_menu']").not(sub).hide(); // ensure siblings are hidden
    sub.show();
})
.on('mouseleave', function(e) {
    var $this = $(this);
    tmrMenu = setTimeout(function() {
        $this.data('subMenu').hide();
    }, 250); // a decent amount of time to reach a sub menu
});

// now a little work on sub-menus
$("#nav [class^='sub_menu']").on('mouseenter', function(e) {
    clearTimeout(tmrMenu); // clears hiding timer
})
.on('mouseleave', function(e) {
    var $this = $(this);
    tmrMenu = setTimeout(function() { $this.hide(); }, 250);
});

例子

剩下的完全取决于你和 CSS！希望这可以帮助！享受！

于 2013-07-10T16:19:43.900 回答
0

问题是，你可以使用纯 CSS 复制同样的效果。您的代码的问题在于，当您悬停主菜单时，它仅在 sub_menu 上应用“显示：块”。而且由于 sub_menu 甚至不是主菜单的一部分，因此即使您将鼠标悬停在它上面，该功能也不会发生。

就像 MiniRagnarok 建议的那样，将子菜单作为子 div 是最好的方法。

您可以向主菜单添加一个通用类，如“menu”，并在其中放置一个带有 sub_menu 类的子菜单。您可以使用以下样式使 sub_menu 出现：

.menu:hover .sub_menu{
   display: block;
 }

这是一个小提琴：http: //jsfiddle.net/nXR5Y/8/

您还应该将子菜单稍微调整到顶部，因为间隙是一个问题。但是如果你真的需要这个间隙，你可以将 sub_menu 放在另一个 div 中，并将上面的样式应用到那个 div 而不是 .sub_menu。

希望有帮助。

于 2013-07-10T16:32:43.637 回答
0

请参阅我的示例。这是小代码并使用 wordpress 运行。

HTML：

<div id="ewm_header">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <header id="ewm_header1">
                    <div class="logo">
                        <a href="http://cssmenufree.com" title="logo">
                            <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21">
                        </a>
                    </div>
                    <div class="menu-nav right">
                        <nav class="mainnav" id="mainnav">
                            <ul class="menu-wrap anima-bottom">
                                <li class="children">
                                    <a href="#">HOME</a>
                                    <ul class="sub-menu" style="margin-left: 0px;">
                                        <li class="children">
                                            <a href="#">HOME VERSION 1</a>
                                            <ul class="sub-menu">
                                                <li class=""><a href="#">HOME DARK</a></li>
                                                <li class=""><a href="#">HOME LIGHT</a></li>
                                            </ul>
                                        </li>
                                        <li class=""><a href="#">HOME VERSION 2</a></li>
                                        <li class=""><a href="#">HOME VERSION 3</a></li>
                                    </ul>
                                </li>
                                <li class="children">
                                    <a href="#">ABOUT</a>
                                    <ul class="sub-menu" style="margin-left: 0px;">
                                        <li class=""><a href="#">ABOUT VERSION 1</a></li>
                                        <li class=""><a href="#">ABOUT VERSION 2</a></li>
                                    </ul>
                                </li>
                                <li class=""><a href="#">PORTFOLIO</a></li>
                                <li class=""><a href="#">BLOG</a></li>
                                <li class=""><a href="#">SERVICES</a></li>
                                <li class=""><a href="#">CONTACT</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>
            </div>
        </div>
    </div>
</div>
<span>You can copy code css. It run with menu in wordpress</span>

CSS：

#ewm_header {
    background: #011d27;
    float: left;
    padding: 15px;
}

#ewm_header a {
    color: #fff;
    text-decoration: none;
}

#ewm_header a:hover {
    color: #11c21d;
}

#ewm_header ul {
    list-style: none;
    margin: 0;
    paddingL 0;
}

.logo {
    float: left;
    margin-right: 30px;
}

.menu-wrap > li {
    float: left;
    position: relative;
    padding: 5px 15px;
}

.menu-wrap li ul {
    position: absolute;
    visibility: hidden;
    top: 100%;
    left: 0;
    background: #011d27;
    z-index: 999;
    width: 200px;
}

.menu-wrap li:hover > ul,
.menu-wrap li ul li:hover ul {
    visibility: visible;
}

.menu-wrap li ul li {
    padding: 10px 5px;
}

.menu-wrap li ul li ul {
    left: 100%;
    top: 0;
}
于 2016-04-02T06:22:27.163 回答