SlideUp用于多个div的SlideDown排序 [英] SlideUp SlideDown sequencing for multiple divs

问题描述

我想在这个小提琴中滑动切换多个div：

I would like to slideToggle multiple divs as done in this fiddle:

http://jsfiddle.net/jakecigar/XwN2L/2154/

这个脚本的功能很好，但是我在下一个内容按顺序向下滑动之前，需要隐藏的内容向上滑动。

The functionality of this script is good, but I need the hidden content to slide up before the next content slides down in a sequence.

此外，当您单击活动div链接时是打开的，它将导致它滑动并被隐藏，因为这是一个网站菜单。

Also, when you click the active div link while it is open, it will cause it to slideUp and be hidden as this is for a site menu.

这是HTML：

Here is the HTML:

  <style>.targetDiv {display: none}</style>

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

以下是脚本：

jQuery(function(){
   jQuery('.showSingle').click(function(){
      jQuery('.targetDiv').slideUp();
      jQuery('.targetDiv').hide();
      jQuery('#div'+$(this).attr('target')).slideToggle();
   });
});

推荐答案

这是一个使用<$ c $的解决方案c>活动类，当没有显示任何内容或点击与当前显示的元素相关联的div时，创建适当的功能。

Here is a solution that uses an active class to create the appropriate functionality when there is nothing shown or the div associated with the currently shown element is clicked.

jQuery(function($){
$('.showSingle').click(function(){
    var itemid = '#div'+$(this).attr('target'); //id of the element to show/hide.

    //Show the element if nothing is shown.
    if($('.active').length === 0){
        $(itemid).slideDown();
        $(itemid).addClass('active');

    //Hide the element if it is shown.
    } else if (itemid == "#"+$('.active').attr('id')) {
        $('.active').slideUp();
        $(itemid).removeClass('active');

    //Otherwise, switch out the current element for the next one sequentially.
    }else {
        $('.active').slideUp(function(){
            $(this).removeClass('active');
            if ($(".targetDiv:animated").length === 0){
                $(itemid).slideDown();
                $(itemid).addClass('active');
            }
        });
    }
});
});

参见 http://jsfiddle.net/m6aRW/1/

编辑

如果页面上的其他内容已经使用活动类，则会中断。使用不同的类名或更精确的选择器。

EDIT
This will break if something else on your page is already using an active class. Use a different class name or a more precise selector.

这篇关于SlideUp用于多个div的SlideDown排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！