jquery - 如何创建一个关闭打开的幻灯片切换

Question

我有以下示例：

http://jsfiddle.net/zidski/Vn9RD/

当打开链接一然后我点击链接二时，我如何关闭链接一？

$('a.county').each( function(e){
    $(this).bind('click', function(e){ 
        var thisIs = $(this).index(); 
        $('.countystats').eq(thisIs).slideToggle(100); });
    });

Answer 1

您可以尝试这种棘手的方法，您的 html 会喜欢...

<div id="1sub" class="sub">sub1</div>
<div id="2sub" class="sub">sub2</div>
<div id="3sub" class="sub">sub3</div>

<div id="stream-1" class="stream" style="display:none;">Stream 1</div>
<div id="stream-2" class="stream" style="display:none;">Stream 2</div>
<div id="stream-3" class="stream" style="display:none;">Stream 3</div>

现在，在 jquery

$(".sub").click(function(){
var subClicked = $(this).attr('id');
$(".stream").hide();
$("#stream-" + subClicked.substring(0,1)).toggle();
});

Answer 2

$('a.county').on('click',function(){
    $('.countystats').slideUp(300);
    $('.countystats').eq($(this).index()).slideDown(300);
});   

我已经更新了你的小提琴，也检查一下。http://jsfiddle.net/Vn9RD/3/

Answer 3

只需先将其他的向上滑动：

$('.countystats').slideUp();
$('.countystats').eq(thisIs).slideDown(100);

Answer 4

您可以捕获要操作的当前元素 - 并使用.not()将其过滤掉

$('a.county').bind('click', function (e) {
    var thisIs = $(this).index();
    var $el = $('.countystats').eq(thisIs); // element you want to toggle
    $el.slideToggle(100);
    $('.countystats').not($el).slideUp(100); // slide all the other ones up
});

FIDDLE

Answer 5

尝试这个：

$("a.county").on("click", function(e) {     
    var target = $(this).data("div");   
    $(target).slideToggle("fast");
    $(".countystats").not(target).hide();
    e.preventDefault();   
});

在这里工作小提琴：http: //jsfiddle.net/7TdSK/

我希望它有帮助。