jquery - CSS 下拉菜单不会在点击时关闭

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

还有我的 slideUp/slideDown javascript(我想我必须在这里添加一些东西才能让菜单在点击时关闭？):

$(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);
    })
});