4

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

2 回答 2

3

active这是一个解决方案，当没有显示任何内容或单击与当前显示的元素关联的 div 时，它使用类来创建适当的功能。

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/

编辑
如果您页面上的其他内容已经在使用某个active类，这将中断。使用不同的类名或更精确的选择器。

于 2013-06-01T02:24:06.730 回答
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/

于 2013-06-01T01:40:38.030 回答