带有两个 div 的 slideToggle答案

【问题标题】：slideToggle with two div's带有两个 div 的 slideToggle
【发布时间】：2014-01-09 09:55:56
【问题描述】：

我对滑动切换没有什么问题：我有 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();
    });
});

【问题讨论】：

请也提供您的 html 代码。
我认为根据您的要求手风琴是最好的，请查看此网址jqueryui.com/accordion

标签： jquery html css show-hide slidetoggle

【解决方案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

【讨论】：

【解决方案2】：

你可以尝试做这样的事情。一个按钮一次切换两个不同的 div。就像起点一样，您应该将其中一个隐藏起来，而将另一个可见。

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

【讨论】：

【解决方案3】：

试试这个

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
       $(".slidingDiv").slideToggle();
       $(".slidingDiv2").slideUp(); // add this line
    });


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

    $('.show_hide2').click(function(){
       $(".slidingDiv2").slideToggle();
       $(".slidingDiv").slideUp(); // and this line
    });

});

【讨论】：

【解决方案4】：

查看这个演示小提琴：http://jsfiddle.net/u6jB8/

标记：

<div class="wrap">
    <a href="#" class="show_hide">Butt2</a>
    <div class="slidingDiv">div 1</div>
</div>

<div class="wrap">
    <a href="#" class="show_hide">Butt1</a>
    <div class="slidingDiv">div 2</div>
</div>

JQuery：

$('a.show_hide').on("click", function() {
    /* stop currently running animation if any, and hide all divs */
    $('div.slidingDiv').stop().slideUp('fast');

    /* stop currently running animation if any, and toggle corresponding div */
    $(this).next('div.slidingDiv').stop().slideToggle('fast');
});

【讨论】：

【解决方案5】：

小提琴：http://jsfiddle.net/Es32W/1/

HTML :
-----------------------------------------
<input type="button" value="Slide1" class="slide1">
<input type="button" value="Slide2" class="slide2">
<div class="slideDiv1 aa">Slide 1</div>
<div class="slideDiv2 noDisplay">Slide 2</div>

JQuery :
------------------------------------------

$( document ).ready(function() {

$(".slide1").click(function(){    
    if($(".slideDiv1").hasClass("noDisplay")){
       $(".slideDiv1").removeClass("noDisplay").show("slide");
       $(".slideDiv2").addClass("noDisplay").hide("slide");       
    }    
  });

$(".slide2").click(function(){    
    if($(".slideDiv2").hasClass("noDisplay")){
       $(".slideDiv2").removeClass("noDisplay").show("slide") ;
       $(".slideDiv1").addClass("noDisplay").hide("slide");       
    }

  });
});

CSS
---------------------------------------------
.slideDiv1, .slideDiv2 {
    width:200px; height:200px; color:#fff;
}

.slideDiv1 {
    background-color:red;
}

.slideDiv2 {
    background-color:blue; display:none;
}
/*.noDisplay { display:none; }*/

【讨论】：