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

我认为您说要在#mini_navbar_home上发生不在#container内的点击时隐藏#navbar。这很简单：

$('#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

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

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

：不是不行

2 个答案: