Открытие/закрытие нескольких разделов с помощью JQuery slideToggle()

Question

Я использую функцию слайда JQuery() для открытия и закрытия моего главного меню. Функция slideToggle() работает отлично.

Что мне нужно сделать, так это получить slideToggle для закрытия div при открытии другого. Я пробовал так много разных способов добиться этого, но я не смог.

Я нашел ниже предложение на StackOverflow:

uses the id of the tag to trigger slideToggle()

То, что я нашел с этим предложением в том, что каждый раз, когда я нажимаю на каждый пункт меню страницы подскакивает к вершине (как его перезагрузку) и I Не понравилось.

Я также нашел немного кода:

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

Вот 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--> 

Ive прошел еще пару уроков, но в них я заметил, что у некоторых людей нет 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