：not not 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

私はあなたが、クリックが内部#navbarないこと#containerに発生したとき#mini_navbar_homeを非表示にすることを言っていると思います。これは非常に簡単です：これはstopPropagationの上に持って

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

利点は、これはあなたが#navbar内の要素にイベントバブルを使用し続けることを可能にするということです。 stopPropagationは、たとえば$('a').live(...)コールを中断します。

Answer 2

簡単な方法は、ドキュメントのクリックをキャプチャして、ナビゲーションバーのバブリングを防ぐことです。そうすれば、clickイベントはドキュメントに届くことはなく、hide関数は決してトリガーされません。 "blacklisted"要素のリストを後で拡張することもできます。このソリューションは、ミニナビゲーションバー内の要素をクリックしても機能します。

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