如何隐藏子菜单时其他菜单点击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(); 
});