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

使用JQuery slideToggle（）打开/关闭多个Div

1 个答案: