Question

我正在尝试在同一页面上为多个div添加下滑效果，但到目前为止，这里只有一个是我的代码：

$(function(){
    $(".child").hide();
    $(".parent").hover(
        function(){ $(".child").slideDown('slow'); },
        function(){ $(".child").slideUp('slow'); }
    );

});

和html

<div class="parent">
    <strong>This would display some content that I can click on</strong> 
</div>
<div class="child">
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
</div>

<div class="parent">
    <strong>This would display some content that I can click on</strong> 
</div>
<div class="child">
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
    This expands across the whole window and is fixed to the bottom<br/>
</div>

问题是我想一次只滑动一个div而不是全部

Answer 1

您可以尝试：jQuery UI - Accordion

Answer 2

你可以这样做：

$(".parent").hover(
        function(){ $(this).next(".child").slideDown('slow'); },
        function(){ $(this).next(".child").slideUp('slow'); }
    );

Answer 3

您可以使用:first和:last一次选择一个并打开它。

谢谢..

为同一页面上的多个元素添加向下滑动效果

3 个答案: