jquery - 如何使下拉菜单在单击其外部任何位置时隐藏？

Question

这里是...顺便说一句，它在 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);
  });    
});

Answer 1

演示:https://jsfiddle.net/j8oawqL4/3/

 $(document).click(function (event) {//if clicked on anywhere

    if (event.target.id != 'category') {//it was not the 'category' dropdown list
        $('.navbar li ul').hide(300);//then hide it
    }
})