如何在點擊任何地方以外的地方時隱藏下拉菜單？

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

這裏是我的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); 
    } 
    }); 
}); 

Answer 2

DEMO：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 
    } 
}) 

Answer 3

$(document).click(function (event) { 
alert(event.target.id); 
if (event.target.id != 'category') { 
    $('.navbar li ul').slideToggle(300); 
} 

}）

Answer 4

怎麼辦？

$("body").on("click", function(e){ 
    if(!$(e.target).is(".navbar *")){ 
     $('.navbar li ul').slideUp(100); 
    } 
}); 

http://jsfiddle.net/j8oawqL4/7/