Question

我正在尝试使用HTML，CSS和jQuery为我的网站制作导航栏，但我得到的问题是当我将鼠标悬停在具有下拉列表的元素上时它会在我选择之前消失。这是我的完整代码。

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-index，以便菜单栏显示在所有其他元素之上。我认为您的网页覆盖了您的下拉列表。添加

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>

当我尝试选择选项时，下拉菜单消失

2 个答案: