使用JQuery打開/關閉多個Divider slideToggle（）

Question

我正在使用Jquery的slideToggle（）來打開和關閉我的主菜單。 slideToggle（）完美地工作。

我需要做的是得到slideToggle關閉一個div時打開一個不同的。我嘗試了很多不同的方法來達到這個目標，但我一直沒能做到。

我發現計算器以下建議：

uses the id of the tag to trigger slideToggle()

我找到了這一建議的是，每次我點擊每個菜單項的頁面跳轉到頂部（就像它被重新加載）和我不喜歡那樣。

我也發現這個代碼點點：

uses the id of the of the div

，我打算給第三個框添加到小提琴，看看發生了什麼事，但它並沒有以同樣的方式工作的第2盒做了，我無法弄清楚爲什麼。

這是我的HTML看起來像：

  <div class="menu-item-1"> 
       <a href="#">Recovery</a> 
      </div> 
      <div class="menu-item-2"> 
       <a href="#">Forensics</a> 
      </div> 
      <div class="menu-item-3"> 
       <a href="#">Erasure</a> 
      </div> 
      <div class="menu-item-4"> 
       <a href="#">Training</a> 
      </div> 
      <div class="menu-item-5"> 
       <a href="#">Products</a> 
      </div> 

這是我的JavaScript是什麼樣子：

$(".menu-item-1").click(function() { 
    $(".recovery-bg").slideToggle("fast", "easeOutBack"); 
}); 

$(".menu-item-2").click(function() { 
    $(".forensic-bg").slideToggle(); 
}); 

$(".menu-item-3").click(function() { 
    $(".erasure-bg").slideToggle(); 
}); 

$(".menu-item-4").click(function() { 
    $(".training-bg").slideToggle(); 
}); 

$(".menu-item-5").click(function() { 
    $(".product-bg").slideToggle(); 
}); 

這裏是的div的HTML代碼的slideToggle（）：

<!--Expanding Recovery Menu--> 
     <div class="recovery-bg arrow_box_recovery toggle hidden-phone"> 
    <div class="container expand"> 
     <div class="row"> 
      <div class="span2 offset1"> 
       <div class="menu-item"> 
        <a href=""><p>Data <br/> Recovery</p></a> 
       </div> 
      </div> 
      <div class="span2 offset1"> 
       <div class="menu-item"> 
        <a href=""><p>Raid <br/> Recovery</p></a> 
       </div> 
      </div> 
      <div class="span2 offset1"> 
       <div class="menu-item"> 
        <a href=""><p>Forensic <br/> Data Recovery</p></a> 
       </div> 
      </div> 
      <div class="span2 offset1"> 
       <div class="menu-item"> 
        <a href=""><p>Tape <br/> Recovery</p></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!--/Expanding Recovery Menu--> 

我經歷了一些其他教程，但在他們中我注意到有些人沒有href在他們的標籤，我想避免這樣的東西，如果我可以。

如果任何人都可以提供幫助，那就太好了。

Answer 1

我會做出這樣

<div class="menu-item menu-item-1" data-target=".recovery-bg"> 
    <a href="#">Recovery</a> 
</div> 
<div class="menu-item menu-item-2" data-target=".forensic-bg"> 
    <a href="#">Forensics</a> 
</div> 
<div class="menu-item menu-item-3" data-target=".erasure-bg"> 
    <a href="#">Erasure</a> 
</div> 
<div class="menu-item menu-item-4" data-target=".training-bg"> 
    <a href="#">Training</a> 
</div> 
<div class="menu-item menu-item-5" data-target=".product-bg"> 
    <a href="#">Products</a> 
</div> 
<div class="menu-toggle recovery-bg"> 
    recovery-bg 
</div> 
<div class="menu-toggle forensic-bg"> 
    forensic-bg 
</div> 
<div class="menu-toggle erasure-bg"> 
    erasure-bg 
</div> 
<div class="menu-toggle training-bg"> 
    training-bg 
</div> 
<div class="menu-toggle product-bg"> 
    product-bg 
</div> 

那麼一些細微的變化標記

jQuery(function ($) { 
    var $bgs = $('.menu-toggle'); 
    $('.menu-item').click(function() { 
     var $target = $($(this).data('target')).stop(true).slideToggle(); 
     $bgs.not($target).filter(':visible').stop(true, true).slideUp(); 
    }) 
}) 

演示：Fiddle