javascript - :not isn't working

Question

我创建了一个简单的导航栏，当您单击一个元素时，另一个导航栏会在其下方打开。消失我写的打开:

$("#container:not(#navbar)").click(function(){
 $("#mini_navbar_home").hide()
});

我想说“在有人点击的屏幕上的任何地方(除了导航栏)，消失#mini_navbar_home”，但是点击容器上的任何地方隐藏它

如果有帮助，它是脚本的一部分:

 var navs = new Array("#mini_navbar_home","#mini_navbar_aboutus","#mini_navbar_folan");
 var colors = new Array("#home_t","#aboutus_t","#folan_t");

 $(document).ready(function(){
  $("#home_t").click(function(){
   change_bg("#home_t")
   navbar_slide_toggle("#mini_navbar_home")
  });
        .
        .
        .
  $("#container:not(#navbar)").click(function(){
   hide_all()
   change_bg()
  });
 });

 function change_bg(div){
  for(i=0; i<colors.length; i++){
   if (colors[i] != div){
    $(colors[i]).css("backgroundColor", "#8895B7");
   }
  }

  if ($(div).css("backgroundColor") == "rgb(169, 181, 212)"){
   $(div).css("backgroundColor", "#8895B7")
  }
  else {
   $(div).css("backgroundColor", "#A9B5D4")
  }
 }
 function navbar_slide_toggle(div){
  for(i=0; i<navs.length; i++){
   if (navs[i] != div){
    $(navs[i]).hide();
   }
  }
  $(div).slideToggle(0);

 }
 function hide_all(){
  for(i=0; i<navs.length; i++){
   $(navs[i]).hide()
  }
 }

顺便说一句，#navabr 嵌套在#container 中我想我的解决方案对大多数用户来说看起来很傻 :D

Answer 1

我 认为 你是说你想在 #container 上发生点击时隐藏 #mini_navbar_home 而不是 >#导航栏。这相当简单:

$('#container').click(function(e){
    var $navbar = $('#navbar');
    if (($navbar[0] !== e.target) && // if the click wasn't on navbar itself
        !$navbar.has(e.target).length // and it wasn't inside navbar
       ) {
        $("#mini_navbar_home").hide() // hide it
    }
});

与 stopPropagation 相比，它的优势在于它允许您继续对 #navbar 中的元素使用事件冒泡。 stopPropagation 会中断，例如，$('a').live(...) 调用。