: не работает

Question

Я создал простую панель навигации, при нажатии которой на элемент открывается другой элемент.чтобы скрыть открытое, я написал:

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

Я хотел сказать, «где бы на экране (кроме панели навигации) кто-то нажимал, исчезает #mini_navbar_home», но щелчок в любом месте контейнера скрывает это1004 *

это часть скрипта, если поможет:

 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 никогда не достигнет документа, и ваша функция скрытия никогда не сработает. Вы также можете расширить список «занесенных в черный список» элементов позже, и это решение по-прежнему работает, даже если вы нажмете на элемент внутри панели мини-навигации.

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