嘗試選擇選項時下拉菜單消失

Question

我正在嘗試使用HTML，CSS和jQuery為我的網站制作導航欄，但是我遇到的問題是，當我將鼠標懸停在具有下拉列表的元素上時，它將在選擇之前消失。 這是我完整的代碼。

jsFiddle

的HTML

    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>``
            <li><a href="#">About</a>
                <ul>

                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Tell</a></li>   
                    <li><a href="#">Contact</a></li> 

                </ul>
            </li>
            <li><a href="#" class="selected">Contact</a></li>
            <li><a href="#">Tell</a>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Tell</a></li>   
                    <li><a href="#">Contact</a></li> 
                </ul>``
            </li>
        </ul>
    </div>

的CSS

body{
    margin:0px;
    padding:0px;
}
.selected{
background:#CCC;
}
#menu{
width:500px;
height:70px;
margin:40px auto;
border:1px solid black;
border-radius:5px;
}
#menu ul{
list-style:none;
position:relative;
}
#menu ul li{
float:left;
position:relative;
width:100px;
text-align:center;
}
#menu ul li a{
text-decoration:none;
display:block;
background:black;
color:white;
padding:10px 30px;
line-height:30px;
}

#menu ul li ul{
display:none;
visibility:hidden;
opacity:0;
position:absolute;  
top:50px;
left:0px;
padding:0;
width:150px;    
}
#menu ul li a:hover, #menu ul li .selected{
background:gray;
    color:white;
}


#menu ul li ul li{
    list-style:none;
    width:100%;
    text-align:left;
    position:relative;
}

#menu ul li:hover ul {
    visibility:visible;
    display:block;
    opacity:1;
    width:150px;
}

jQuery的

    $(document).ready(function(e) {

    $("#menu ul li a").click(function(e){

        $("#menu ul li a").removeClass("selected");
        }).click (function(){

            $(this).addClass("selected");
            });


        $("#menu ul li a").mouseenter(function(){
            $("#menu ul li ul").slideToggle("fast");

            });     

});

Answer 1

在樣式中添加Z索引，以便菜單欄顯示在所有其他元素的頂部。 我認為您的頁面涵蓋了您的下拉菜單。 加

z-index: 99;

到您的菜單類或下拉菜單元素上。

Answer 2

首先，單擊后要綁定slideToggle。 如果您的代碼結構更好一些，您會立即注意到這一點。 另外，您經常要定義列表。 因此，首先讓我們清理您的Javascript：

$(document).ready(function(e) {
    // we only need one click event!
    $("#menu ul li a").click(function(event){
        // We only want to selected the a.selected and remove there, its slightly faster!
        $("#menu ul li a.selected").removeClass("selected");
        // We can immediately add the class to this element
        $(this).addClass("selected");
    });
});

我也刪除了slideToggle ，這是有充分的理由的。 我們想用css做到這一點！

body{
    margin:0px;
    padding:0px;
}
.selected{
    background:#CCC;
}
#menu{
    width:500px;
    height:70px;
    margin:40px auto;
    border:1px solid black;
    border-radius:5px;
}
#menu ul{
    list-style:none;
    position:relative;
}
#menu ul li{
    float:left;
    position:relative;
    width:100px;
    text-align:center;
}

#menu ul li a{
    text-decoration:none;
    display:block;
    background:black;
    color:white;
    padding:10px 30px;
    line-height:30px;
}

#menu ul li ul{
    display:none;
    visibility:hidden;
    opacity:0;
    position:absolute;  
    top:50px;
    left:0px;
    padding:0;
    width:150px;    
}
#menu ul li a:hover, 
#menu ul li .selected{
    background:gray;
    color:white;
}

/* Here is some magic. We hide the overflow and give it no height, so it appears hidden. */
#menu ul li ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height 500ms;
}

#menu ul li ul li {
    list-style:none;
    width:100%;
    text-align:left;
    position:relative;
}

/* We add a state for when we hover on the ul itself, and give that a bigger max-height. */
#menu ul li:hover ul
#menu ul li ul:hover {
    visibility:visible;
    display:block;
    opacity:1;
    width:150px;
    /* And this will make it work! */
    max-height: 500px;
}

 $(document).ready(function(e) { // we only need one click event! $("#menu ul li a").click(function(event){ // We only want to selected the a.selected and remove there, its slightly faster! $("#menu ul li a.selected").removeClass("selected"); // We can immediately add the class to this element $(this).addClass("selected"); }); }); 

 body{ margin:0px; padding:0px; } .selected{ background:#CCC; } #menu{ width:500px; height:70px; margin:40px auto; border:1px solid black; border-radius:5px; } #menu ul{ list-style:none; position:relative; } #menu ul li{ float:left; position:relative; width:100px; text-align:center; } #menu ul li a{ text-decoration:none; display:block; background:black; color:white; padding:10px 30px; line-height:30px; } #menu ul li ul{ display:none; visibility:hidden; opacity:0; position:absolute; top:50px; left:0px; padding:0; width:150px; } #menu ul li a:hover, #menu ul li .selected{ background:gray; color:white; } /* Here is some magic. We hide the overflow and give it no height, so it appears hidden. */ #menu ul li ul { overflow: hidden; display:block; max-height: 0; -webkit-transition: max-height 500ms; transition: max-height 500ms; } #menu ul li ul li { list-style:none; width:100%; text-align:left; position:relative; } /* We add a state for when we hover on the ul itself, and give that a bigger max-height. */ #menu ul li:hover ul, #menu ul li ul:hover { visibility:visible; opacity:1; width:150px; /* And this will make it work! */ max-height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div id="menu"> <ul> <li><a href="#">Home</a></li>`` <li><a href="#">About</a> <ul> <li><a href="#">Contact</a></li> <li><a href="#">Tell</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#" class="selected">Contact</a></li> <li><a href="#">Tell</a> <ul> <li><a href="#">Contact</a></li> <li><a href="#">Tell</a></li> <li><a href="#">Contact</a></li> </ul>`` </li> </ul> </div>