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

我试图使用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>

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");

            });     

});

---

在样式中添加z索引，以便菜单栏显示在所有其他元素的顶部。我认为你的页面覆盖了你的下拉列表。加

z-index: 99;

---

到您的菜单类或下拉元素中的任何一个。

首先，单击后您将绑定幻灯片切换。如果您的代码结构稍微好一点，您会立即注意到这一点。此外，您正在定义要经常使用的a列表。首先，让我们清理一下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");
    });
});

我还删除了您的

幻灯片切换

，这是有充分理由的。我们想用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;
}

$（文档）.ready（函数（e）{
//我们只需要一次点击事件！
$（“#菜单ul li a”）。单击（功能（事件）{
//我们只想选择a。选择并删除那里，它稍微快一点！
$（“#菜单ul li a.selected”）.removeClass（“selected”）；
//我们可以立即将该类添加到此元素中
$（此）.addClass（“选定”）；
});
});
正文{
边际：0px；
填充：0px；
}
.选定{
背景：#CCC；
}
#菜单{
宽度：500px；
高度：70像素；
利润率：40px自动；
边框：1px纯黑；
边界半径：5px；
}
#菜单ul{
列表样式：无；
位置：相对位置；
}
#菜单ulli{
浮动：左；
位置：相对位置；
宽度：100px；
文本对齐：居中；
}
#菜单ulli a{
文字装饰：无；
显示：块；
背景：黑色；
颜色：白色；
填充：10px 30px；
线高：30px；
}
#菜单{
显示：无；
可见性：隐藏；
不透明度：0；
位置：绝对位置；
顶部：50px；
左：0px；
填充：0；
宽度：150px；
}
#菜单：悬停，
#菜单ul li。已选择{
背景：灰色；
颜色：白色；
}
/*这里有一些魔法。我们隐藏溢出，不给它任何高度，因此它看起来是隐藏的*/
#菜单{
溢出：隐藏；
显示：块；
最大高度：0；
-webkit过渡：最大高度500ms；
过渡段：最大高度500ms；
}
#菜单ulli ulli{
列表样式：无；
宽度：100%；
文本对齐：左对齐；
位置：相对位置；
}
/*当我们将鼠标悬停在ul上时，我们会为其添加一个状态，并给它一个更大的最大高度*/
#菜单ul li：悬停ul，
#菜单ul li ul：悬停{
能见度：可见；
不透明度：1；
宽度：150px；
/*这将使它工作*/
最大高度：500px；
}


``













``



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;
}