使用 JQuery slideToggle() 打开/关闭多个 div

Question

我正在使用 Jquery 的 slideToggle() 打开和关闭我的主菜单。 slideToggle() 完美地工作。

我需要做的是让 slideToggle 在打开另一个 div 时关闭一个 div。我尝试了很多不同的方法来实现这一点，但我一直无法做到。

我在stackoverflow上找到了以下建议：

uses the id of the tag to trigger slideToggle()

我发现这个建议是，每次我点击每个菜单项时，页面都会跳到顶部（就像它正在重新加载一样），我不喜欢这样。

我还发现了这段代码：

uses the id of the of the div

我尝试在该小提琴中添加第三个框以查看发生了什么，但它的工作方式与前两个框不同，我不知道为什么。

这是我的 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();
});

这里是 slideToggle() 的 div 的 HTML 代码：

<!--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