2011-01-30 8 views
1

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

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

+0

Не могли бы вы добавить свой полный код к http://jsfiddle.net или тому подобное? – sunn0

+8

Элемент всегда имеет только один идентификатор. Поэтому '#a: not (#b)' бессмысленно. – Gumbo

ответ

2

Я думаю вы говорите, что вы хотите скрыть #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(...) звонки.

0

Более простой способ - захватить клики по документу, а затем предотвратить барботирование на панели навигации. Таким образом, событие клика никогда не достигнет документа, и ваша функция скрытия никогда не срабатывает. Вы также можете расширить список элементов «черного списка» позже, и это решение по-прежнему работает, даже если вы нажмете на элемент внутри вашей мини-навигационной панели.

var $mini_navbar_home = $("#mini_navbar_home"); 
$(document).click(function() { $mini_navbar_home.hide() }); 
$("#navbar").click(function(e) { 
    e.stopPropagation(); 
    return false; 
}); 
Смежные вопросы