JQuery toggle закрыть другие контейнеры

Question

Я использую метод JQuery toggle для отображения divs на основе ссылки, которую пользователь нажмет.

http://jsfiddle.net/Rn9tg/905/

Единственное, что я хочу, чтобы изменить это, чтобы иметь другие меню закрывается, когда другой один щелкают. Таким образом, только одно меню всегда будет открыто одновременно. Может ли кто-нибудь показать мне самый прямой метод для достижения этого?

Jquery 
$(document).ready(function() { 
    $('#homeMenu').click(function() { 
      $('#menu1').slideToggle("fast"); 
    }); 
     $('#shopMenu').click(function() { 
      $('#menu2').slideToggle("fast"); 
    }); 
    $('#faqMenu').click(function() { 
      $('#menu3').slideToggle("fast"); 
    }); 
}); 

HTML

<div id="Navigation"> 
<ul> 
    <li><a href="#" id="homeMenu">Home</a></li> 
    <li><a href="#" id="shopMenu">Shop</a></li> 
    <li><a href="#" id="faqMenu">FAQ</a></li> 
</ul> 
</div> 

<div id="menu1" style="display:none;">This is menu one</div> 
<div id="menu2" style="display:none;">This is menu two</div> 
<div id="menu3" style="display:none;">This is menu three</div> 

Answer 1

Вероятно, чтобы разместить дивы в контейнере:

<div> 
    <div id="menu1" style="display:none;">This is menu one</div> 
    <div id="menu2" style="display:none;">This is menu two</div> 
    <div id="menu3" style="display:none;">This is menu three</div> 
</div> 

А затем изменить ваш JavaScript для каждого пункта меню, как так:

$('#menu1').slideToggle("fast").siblings().hide(); 

Answer 2

Вы можете перемещать вручную другой конт iners.

var menus = ['#menu1', '#menu2', '#menu3'] 

    $('#homeMenu').click(function() { 
      $('#menu1').slideToggle("fast"); 
      $(menus.join(',').replace('#menu1')).slideUp(); 
    }); 
     $('#shopMenu').click(function() { 
      $('#menu2').slideToggle("fast"); 
      $(menus.join(',').replace('#menu2')).slideUp(); 

    }); 
    $('#faqMenu').click(function() { 
      $('#menu3').slideToggle("fast"); 
          $(menus.join(',').replace('#menu3')).slideUp(); 

    }); 

http://jsfiddle.net/Rn9tg/906/

Answer 3

Это редко хорошая идея использовать кучу идентификаторов для такого рода вещи. Вместо этого следует использовать DOM обход относительно щелкнутого элемента:

$('#navigation ul li').click(function() { 
    var idx = $(this).index(); 

    $('#content > div').eq(idx).slideToggle().siblings().slideUp(); 
}); 

Demo

Обратите внимание, что я положил обертки вокруг содержания. Это решение зависит только от двух идентификаторов, и это может быть сведено к одному с некоторыми дополнительными изменениями разметки.