:not 不起作用

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

我认为您的意思是，当点击不在 #navbar 内的 #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(...) 调用。

Answer 2

更简单的方法是捕获文档上的点击，然后防止导航栏上出现冒泡。这样，单击事件将永远不会到达文档，并且您的隐藏功能永远不会被触发。您也可以稍后扩展“黑名单”元素的列表，即使您单击迷你导航栏内的元素，此解决方案仍然有效。

var $mini_navbar_home = $("#mini_navbar_home");
$(document).click(function() { $mini_navbar_home.hide() });
$("#navbar").click(function(e) {
  e.stopPropagation();
  return false;
});