SlideUp SlideDown sequencing for multiple divs

问题

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.

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.

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>

Here is the script:

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

回答1:

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

See 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.

回答2:

You need to trigger successive animations from the completion function of the earlier animations. This will let you start one, when it finishes, start the next, when it finishes, start the next as so on.

It is not clear to me exactly how you want the behavior to work. If you could explain that better, I could offer a code example.

Making a guess at what you want, here's an example:

jQuery(function(){
   jQuery('.showSingle').click(function(){
       // get visible targetDivs
       var vis = jQuery('.targetDiv:visible');

       // get the item we're supposed to show from an attribute on what was clicked
       var targetItem = $(this).attr('target');

       // make jQuery object for target
       var target = jQuery('#div' + targetItem);

       // assume we want to slideDown
       var fn = function() {
           target.slideDown();
       };
       // if there are some visible,then we will get a completion function
       // and should hide visible items
       if (vis.length) {
           if (vis[0].id == "div" + targetItem) {
               // if clicking on the one that's already shown, 
               //    nothing to show on completion
               fn = function() {};
           }
           vis.slideUp(fn);
       } else {
           // otherwise, just show the selected one (none to hide)
          target.slideDown();
       }
   });
});

Working demo: http://jsfiddle.net/jfriend00/fd4Nn/

来源：https://stackoverflow.com/questions/16868211/slideup-slidedown-sequencing-for-multiple-divs

标签

jquery