的slideToggle有两个div的

我没有什么问题了的slideToggle：我有2周的div：的slideToggle有两个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 //好吧

它也与Butt2一起工作

但是，我想，如果slidingDiv已经打开，如果我点击Butt2，它打开slidingDiv2，它关闭slidingDiv，如果slidingDiv2已经打开，如果我点击Butt1，它打开slidingDiv和IT紧密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(); 
    }); 
});

来源

2014-01-09 yves p

也请提供您的HTML代码。 –

我认为根据您的要求，手风琴是最好的，请检查此网址http://jqueryui.com/accordion/ – Jalpesh

试试这个

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

});

来源

2014-01-09 09:59:51 zzlalani

欢迎您... – zzlalani

尝试

<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

来源

2014-01-09 10:01:37

感谢很多为快速回答，它的作品 –

看到这个演示小提琴：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'); 
});

来源

2014-01-09 10:05:43 Abhitalks

谢谢了很多！ –

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

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

来源

2014-01-09 10:35:03

小提琴：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; }*/

来源

2014-01-09 10:58:31 Arul

的slideToggle有两个div的

回答

相关问题