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，如果{{1} }}已经打开，如果我点击slidingDiv2，它会打开Butt1并关闭slidingDiv。

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

感谢您的帮助

伊夫

代码：

slidingDiv2

Answer 1

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

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

Answer 2

试试这个

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

});

Answer 3

尝试

<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

Answer 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');
});

Answer 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; }*/

slideToggle有两个div

5 个答案: