如何隱藏子菜單時其他菜單點擊JQuery的

Question

我想弄清楚一兩件事，我有一個頁面的網站，想隱藏下的投資組合子菜單時其他菜單鏈接cliked http://jsfiddle.net/kuuwj/15/

HTML

<ul id="navbar"> 
    <li><a href="#home" id="nav-home">Home</a></li> 
    <li><a href="#portfolio" id="nav-portfolio">Portfolio</a> 
     <div class="portfolio-apps"> 
     <section id="website"> 
      <span class="button">AAAAAAAAAAAAAAAAAAAAAA</span> 
     </section> 
     <section id="gterminal"> 
      <span class="button">BBBBBBBBBBBBBBBBBBBBBB</span> 
     </section> 
     <section> 
      <span class="button">CCCCCCCCCCCCCCCCCCCCCC</span> 
     </section> 
     </div> 
    </li> 
    <li><a href="#about" id="nav-about">About Me</a></li> 
    <li><a href="#contact" id="nav-contact">Contact</a></li> 
    </ul> 

JS

$(document).ready(function() { 
    var portf_apps = $('.portfolio-apps'); 
    portf_apps.hide(); 
    $('#nav-portfolio').click(function() { 
     portf_apps.show(); 
    }); 

}); 

Answer 1

綁定另一個click事件之前，其他導航欄元素組合出一個：

$("#navbar a").on('click', function() { 
    $(".portfolio-apps").hide(); 
}); 

var portf_apps = $('.portfolio-apps'); 
... 

這將導致portf_apps方法事後觸發，這將顯示其子女即使它被點擊。儘管如此，我建議更新這個版本以便與父母 - 子女關係一起工作。

http://jsfiddle.net/jWujm/

Answer 2

更改你的Javascript這樣的：

$('#navbar > li > a').click(function(){ 
    portf_apps.hide(); 
}); 
$('#nav-portfolio').unbind('click').click(function() { 
    portf_apps.show(); 
});