Question

我决定用更狡猾的方法来编译菜单似乎我喜欢折磨自己

不管怎么说,我创造了一个迪夫菜单:

<div class="menu-bar">
    <div class="menu-item"><span class="menu-text">HOME</span></div>
    <div class="menu-item"><span class="menu-text">ABOUT US</span>
        <div class="sub-menu-items">
            <div class="sub-menu-item">History</div>
            <div class="sub-menu-item">Mission, vision and values</div>
            <div class="sub-menu-item">B-BBEE</div>
            <div class="sub-menu-item">Team</div>
            <div class="sub-menu-item">Professional Affiliations</div>
        </div>
    </div>
    <div class="menu-item"><span class="menu-text">SECTORS</span></div>
    <div class="menu-item"><span class="menu-text">SERVICES</span></div>
    <div class="menu-item"><span class="menu-text">CSR</span></div>
    <div class="menu-item"><span class="menu-text">PROJECTS</span></div>
    <div class="menu-item"><span class="menu-text">SUSTAINABILITY</span></div>
    <div class="menu-item"><span class="menu-text">CONTACT US</span></div>
</div>

我的问题与子菜单 < code>. sub-menu- items 一起出现。当鼠标从“ 环绕我们” 块中移动并进入子菜单时, 我不知道如何让它保持开放。

以下是目前我拥有的 Javascript 代码 :

$( .sub-menu-items ).hide();
$( .menu-text ).hover(function(e) {
// Show highlight
    $(this).toggleClass( menu-text-hover );
    $(this).parent().toggleClass( menu-item-hover );
    if($(this).html().indexOf( ABOUT ,0) !== -1)
        $( .sub-menu-items ).show( fast );
},function(e) {
// Hide highlight
    $(this).toggleClass( menu-text-hover );
    $(this).parent().toggleClass( menu-item-hover );
    if($(this).html().indexOf( ABOUT ,0) !== -1)
        $( .sub-menu-items ).hide( fast );
});

这是我的CSS:

.menu-bar           { position:absolute; top:159px; height:54px; width:1024px; background-color:#fafafa; z-index:2; }
.menu-item          { display:table-cell; vertical-align:middle; position:relative; left:79px; height:54px; text-align:center; width:105px; border-right:dotted thin #000; border-bottom:dotted thin #000; background-color:#fafafa; }
.menu-item-hover    { border-bottom:none; }
.menu-text          { display:table-cell; vertical-align:middle; height:52px; width:101px; position:relative; left:2px; top:1px; text-align:center; border-top-right-radius:0px; margin-left:2px; margin-top:2px; margin-right:2px; }
.menu-text-hover    { border-top-right-radius:20px; background-color:#445921; color:#fff; cursor:pointer; }

.sub-menu-items     { position:absolute; display:inline-block; top:55px; width:105px; background: rgba(255, 255, 255, 0.8); font-size:12px; z-index:100; }
.sub-menu-item      { background:url(../images/devider-horizontal.png) no-repeat center top; display:block; height:40px; }
.sub-menu-item:last { background-image:none; display:block; height:40px; }

有人能帮助我实现我的目标吗? 使鼠标还在讨论时下拉菜单保持可见度?

Answer 1

你可以重建你的代码一点点:

$( .sub-menu-items ).hide();
$( .menu-item ).hover(function(e) {
    var el = $(this).children(".menu-text");
    el.toggleClass( menu-text-hover );
    $(this).toggleClass( menu-item-hover );
    if (el.html().indexOf( ABOUT , 0) !== -1)
        $(this).find( .sub-menu-items ).show( fast );
}, function(e) {
    var el = $(this).children(".menu-text");
    el.toggleClass( menu-text-hover );
    $(this).toggleClass( menu-item-hover );
    if (el.html().indexOf( ABOUT , 0) !== -1)
        $(this).find( .sub-menu-items ).hide( fast );
});

DEMO: http://jsfiddle.net/vnRV4/

@epascarello 在批注中提出的好问题。您最好使用嵌套列表而不是 div 区块。此外, 最好用 CSS 样式 < code > 来替换 < code>$ (. sub-menu- items ). hide () 。 sub-menu- items { 显示: no; @ {/ code>, 以防止在页面负荷上闪烁。

Answer 2

您可以使用 SetTimeout 和用这个检查旗帜。

函数外边:

var submenuhovered=false;

隐藏函数 :

setTimeout(function(){
    if(submenuhovered==false){
        $(this).siblings(".sub-menu-items").hide();
    }
},200);

子菜单鼠标翻转函数

submenuhovered = true;

子菜单鼠标退出功能

submenuhovered = false;

或您可以使用菜单元素 s. data () 收藏来代替全局变量。

$("menu").data("submenuhovered","true");

友情链接