Question

我有这个jQuery代码，它工作正常。它最后是一个简单的下拉菜单。点击“topbar”会打开并关闭“topbarin”div。

$(document).ready(function(){
    $('.topbar').click(function(){
        $('.topbarin').fadeOut(400);
        if($(this).next('.topbarin').is(":visible"))
        {
        $(this).next('.topbarin').fadeOut(400);
        }
        else
        {
        $(this).next('.topbarin').fadeIn(400);
        }
    });
});

这里有一些HTML

<div class="fr"><div class="topbar">SMS Support phones</div>
            <ul class="topbarin">
              <li>Phone 1</li>
              <li>Phone 2</li></ul>
          </div>

但是，点击.topbarin的菜单之后的任何机会都可以简单地淡出？

THX！

Answer 1

您可以在此之后添加此代码，当点击超出整个菜单时，它会淡出菜单。

 $(document).ready(function(){
    $('.fr').click(function(){
        $('ul.topbarin').toggle('slide');
    });
});
$(document).click(function(e){

    if (!$(e.target).hasClass('topbar') ) {
         $('.topbarin').fadeOut(400);
    }
});

html代码

<div class="fr">
    <div class="topbar">SMS Support phones</div>
            <ul class="topbarin">
              <li>Phone 1</li>
              <li>Phone 2</li>
           </ul>
</div>

Answer 2

您可以在此之后添加此代码，当点击超出整个菜单时，它会淡出菜单。

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

    if (!$(e.target).hasClass('topbar') ) {
         $('.topbarin').fadeOut(400);
    }
});

Answer 3

这可能会对您有所帮助： -

$(document).ready(function(){

    $('.topbar, .topbarin li').click(function(){
        $('ul.topbarin').toggle('slide');
    });

})

小提琴链接fiddle

如何在单击其父菜单后隐藏下拉列表div？

3 个答案: