Question

我希望你能帮助我提示我做错了什么，因为当用户点击其中一个子项时我的下拉列表不会关闭。它会一直保持打开状态，直到您点击外面的任

对于css和jquery，我仍然是一个新手，所以请不要对我太过刻苦;）

以下是该网站开发的链接： http://prestigetrips.com/pricklybay/

当你将鼠标悬停在“Marina”上时，就是下拉列表。

这是我的css：

 #mainnav {
    position: fixed;
    width: 700px;
    height: 44px;
    margin-top: 40px;
    float: right;
    right:0;
    box-sizing:border-box;
    text-transform:uppercase;
    font-size: 0.85em;
    z-index: 100;
}
#mainnav ul {
    float:right;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;   
}
#mainnav ul li a {
    float:right;
    margin-right: 0;
}
#mainnav ul > li:first-child a{
    float:right;
    margin-right: 0;
}

#mainnav ul ul {
    display: none;
}

#mainnav ul li:hover > ul {
    display: block;
}

#mainnav ul ul {
    background: rgb(88,38,125); 
    opacity: 0.9;
    -webkit-opacity: 0.9;
    -moz-opacity: 0.9;
    border-radius: 0px; 
    position: absolute; 
    top: 44px;
    left: 0px;
    width:250px;
}
#mainnav ul ul li {
    float: left; 
    border-top: none;
    position: relative;
    border-bottom: 1px dotted #B6A0C1;
    width: 100%;
    color: rgb(234,222,239);
}
#mainnav ul ul li:last-child{
    border-bottom: none;
}
#mainnav ul ul li a {
    color: rgb(223,207,231);
    float:left;
    text-decoration:none;
    padding: 22px 12px 22px 90px;
}
#mainnav ul ul li:first-child a{
    float:left;
    margin-right: 0;
}
#mainnav ul ul li:hover{
   margin-right: 0;
}
#mainnav ul ul.dropdown li:nth-child(2) hover + li {
    margin-right: 0;
    border-bottom: 1px dotted #B6A0C1;
}
#mainnav ul ul li a:hover {
     -webkit-transition: all .2s ease-in-out;  
     -moz-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out;  
     -o-transition: all .2s ease-in-out;  
     transition: all .2s ease-in-out;
     color: #fff;
}
#mainnav ul ul li:hover {
    background: rgba(123,73,146,0.9);
    padding:0;
    padding-bottom: 1px;
    border: none;
}
#mainnav ul li.active > a, #mainnav ul li.active {
    pointer-events: none;
    cursor: default;
}

我的javascript for slideUp / slideDown（我假设我必须在这里添加一些东西才能让菜单关闭点击？）：

$(document).ready(function(){
        $('#mainnav li').hover(function(){
            $('ul', this).slideUp(0).stop(true, true).slideDown(300);
        },

        function(){
            $('.dropdown', this).css("display", "block").stop(true, true).delay(50).slideUp(300);
        });

    });

我希望你能帮助我，提前谢谢你们！

Answer 1

因为点击下拉列表没有处理程序

$(document).ready(function () {
    $('#mainnav li').hover(function () {
        $('ul', this).slideUp(0).stop(true, true).slideDown(300);
    }, function () {
        $('.dropdown', this).css("display", "block").stop(true, true).delay(50).slideUp(300);
    });

    //hide it on click
    $('#mainnav ul ul li').click(function () {
        $(this).closest('.dropdown').css("display", "block").stop(true, true).delay(50).slideUp(300);
    })
});

CSS下拉菜单没有关闭点击

1 个答案: