jquery - 在下拉菜单外的任何地方单击时如何隐藏下拉菜单？

这里是...顺便说一下，它在jsFiddle中未对齐。在我的实际网页中，它是对齐的，因此不必担心。

http://jsfiddle.net/j8oawqL4/

我尝试使用受http://jsbin.com/umubad/2/启发的代码，但无法弄清楚如何成功实现它。

的HTML

  <ul class="navbar cf">
                    <li>
                        <a href="#" class="ActiveListItem">Category</a>
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

的CSS

ul.navbar {

  border-style:solid;
  border-width:1px;
  border-color:#739FE0;
  width: 100px;                /*Widthchanger1*/
  border-radius: 4px;
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
  height:33px;



}


ul.navbar li a.ActiveListItem {
    background:url(../images/downarrowblue.png) !important;
    background-repeat: no-repeat !important;
    background-size: 10px 10px !important;
    background-position: 83px 13px !important;
    color:white; !important;
    background-color:#222 !important;
    padding:7.5px 0px !important;
    font-weight:normal !important;
    margin-left:0px;         /*Widthchanger2, got the activeitem centered with list text this way*/
    margin-right:0px;
    border-radius: 4px;
    height:18px;
    width:100px;   /*kinda messes with width of text*/
     margin-bottom:1px;

}

ul.navbar li {

    position: relative;
    width:100px;                        /*Changes width of actual list*/
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .1s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    /*background:black; */
    background:#739FE0;
    color:#FFFFFF;
    /*font-weight:600;*/
    /*border-bottom-color:#FFFFFF;
    border-bottom-style:solid;*/
    /*border-color:#FFFFFF;
    border-style:solid;
    border-width:1px; */

}

    ul.navbar li ul {
        margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
        position: absolute;
        background: #222;
        font-size: 14px;
        /* min-width: 200px; */
        display: none;
        z-index: 99;
        box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }

JS

$(function() {




  $('.navbar ul li a').click(function(){
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){
    $('.navbar li ul').slideToggle(300);
  });
});

最佳答案

这是我的jsFiddle

修改您的jQuery：

$(function() {

    var container = $('.navbar');


  $('.navbar ul li a').click(function(){
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){
    $('.navbar li ul').slideToggle(300);
  });


 $(document).mouseup(function (e)
    {
    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        $('.navbar li ul').slideToggle(300);
    }
     });
});

关于jquery - 在下拉菜单外的任何地方单击时如何隐藏下拉菜单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30054149/