jquery - 带有两个 div 的 slideToggle

Question

我对 slidetoggle 没有什么问题: 我有 2 个 div:

<div class="slidingDiv"></div>
<div class="slidingDiv2"></div>

和 2 个按钮:

<a href="#" class="show_hide2">Butt2</a>
<a href="#" class="show_hide">Butt1</a>

如果我点击 Butt1，它会打开 slidingDiv//ok 如果我再次点击它关闭 slidingDiv//ok

它也适用于 Butt2

但是，我想，如果 slidingDiv 已经打开，如果我点击 Butt2，它会打开 slidingDiv2 并关闭 slidingDiv，如果 slidingDiv2 已经打开，如果我点击 Butt1，它会打开 slidingDiv 并关闭 slidingDiv2.

我想，我必须使用 hasClass、removeClass 和 addClass，但我不知道该怎么做

谢谢你的帮助

伊夫

代码:

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });

    $(".slidingDiv2").hide();
    $(".show_hide2").show();

    $('.show_hide2').click(function(){
         $(".slidingDiv2").slideToggle();
    });
});

Answer 1

尝试

<a href="#" class="show_hide" data-target=".slidingDiv">Butt2</a>  
<a href="#" class="show_hide" data-target=".slidingDiv2">Butt1</a>

<div class="slidingDiv slider">slidingDiv</div>
<div class="slidingDiv2 slider">slidingDiv</div>

然后

$(document).ready(function () {
    //all target div's which has to be toggled has the class slider
    var $sliders = $(".slider").hide();
    //all anchors which has to trigger the slide has the class show_hide and has a data-* property data-target whose value is the selector to find the target div
    $(".show_hide").show();

    $('.show_hide').click(function () {
        var $target = $($(this).data('target'));
        $sliders.not($target).stop(true, true).slideUp();
        $target.stop(true, true).slideToggle();
    });
});

演示:Fiddle