0

  1. I want to check if link "meist" is clicked or not, and if it is clicked than change the submenu to submeist. So if you hover out your mouse it will automatically go back to the submeist menu

  2. The submenu will disappear when I want to click something on the submenu, I couldnt figure out the fix for it either.

HTML

<ul id="menüü">  
    <li id="meist">  
        <p><a href="meist.html">Meist</a></p>  
    </li> 
    <li id="seadmed">  
        <p><a href="seadmed.html">Seadmed</a></p>  
    </li> 
</ul>

<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>

    <ul id="subseadmed">
        <li class="item1"> 
            Item 1 
        </li>
        <li class="item2"> 
            Item 2 
        </li>
        <li class="item3"> 
            Item 3 
        </li>
    </ul>
</div>

CSS

#meist {  
    display: inline;
    float:left;
    width:180px;  
    height:50px;  
    color:#191919;  
    text-align:center;  
    overflow:hidden; 
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
} 
#meist:hover {  
    text-decoration: underline;
    color: white;
    font-size: 17.5px; 
    line-height: 15px;
} 
#seadmed {  
    display: inline;
    float:left;
    width:180px;  
    height:50px;  
    color:#191919;  
    text-align:center;  
    overflow:hidden; 
    background:#990000;
}  
#seadmed:hover {  
    text-decoration: underline;
    color: white;
    font-size: 17.5px; 
    line-height: 15px;
} 
#submenu {
    color:white;
    height:25px;
    width:900px;
    background:#630000;
    margin-top:50px;
}
#submeist  {   
    display:none;
    font-size:12px;
}
#submeist .asi1 {
    margin-left:70px;
    height:25px;
    width:75px;
}
#submeist .asi2 {
    margin-left:25px;
}
#submeist .asi3 {
    margin-left:25px;
}
#subseadmed {   
    display:none;
    font-size:12px;
}
#subseadmed .item1 {
    margin-left:70px;
    height:25px;
    width:75px;
}
#subseadmed .item2 {
    margin-left:25px;
}
#subseadmed .item3 {
    margin-left:25px;
}

JS

$(document).ready(function () {
    $("#meist").mouseleave(function () {
        $("#submeist").hide();
        return false;
    });

    $("#meist").mouseenter(function () {
        $("#submeist").show();
        return false;
    });

    $("#seadmed").mouseleave(function () {
        $("#subseadmed").hide();
        return false;
    });

    $("#seadmed").mouseenter(function () {
        $("#subseadmed").show();
        return false;
    });
});
4

1 回答 1

1

我想你可以通过添加来延迟隐藏队列

 $("#meist").mouseleave(function () { 
    $("#submeist").delay(1000).hide('fast');
    return false; 
});

和

   $("#seadmed").mouseleave(function () { 
    $("#subseadmed").delay(1000).hide('fast');
    return false;

小心拖延 que。仅在必要时添加。这可以是临时解决方案之一，这不是唯一的解决方案。

根据需要增加隐藏子菜单的时间。

于 2013-06-03T17:48:02.103 回答