Question

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

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

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

此外，当您在活动div链接打开时单击该链接时，它将使其滑动并隐藏，因为这是用于网站菜单。

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

Answer 1

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

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课程，则会中断此操作。使用不同的类名或更精确的选择器。

Answer 2

您需要从早期动画的完成功能触发连续动画。这将让你开始一个，当它完成，开始下一个，当它完成，开始下一个，如此。

我不清楚您希望行为如何运作。如果你能更好地解释一下，我可以提供一个代码示例。

猜测你想要的东西，这是一个例子：

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

工作演示：http://jsfiddle.net/jfriend00/fd4Nn/

SlideUp用于多个div的SlideDown排序

2 个答案: