Question

如何将此脚本用于多个Div？

脚本：

$(document).ready(function(){
    $('.slidedown_head').toggle(function(){
        $('.slidedown_body').slideDown();
    }, function(){
        $('.slidedown_body').slideUp();
    });
});

HTML：

<div class="slidedown_head">
    Blub
</div>
<div class="slidedown_body" style="display:none">
    <p>bla</p>
    <p>blablub</p>
</div>
<div class="slidedown_head">
    Blub
</div>
<div class="slidedown_body" style="display:none">
    <p>bla</p>
    <p>blablub</p>
</div>

如果我点击＆＃34; Blub＆＃34;两个div滑落。
我不想为每个Div添加个人ID和个人脚本。

Answer 1

您可以使用next()来抓取正确的正文元素，slideToggle()就像这样：

$('.slidedown_head').click(function() {
   $(this).next('.slidedown_body').slideToggle();
});

jsFiddle here

Answer 2

我已经添加了CSS代码以使其看起来更好

＆＃13;

.slidedown_body{
  background-color: #FAFAFA;
  padding: 30px;
}

＆＃13;

$(document).ready(function(){
var $panel = $('.slidedown_head'); 
$panel.click(function() {
   $(this).next('.slidedown_body').slideToggle("fast",function() {
		$('.slidedown_body').animate({width: '120px', opacity: '0.8'}, "slow"); return true;});
});
});

＆＃13;

  display: none;
  margin-left: 50px;
  position:absolute;
  z-index:100;   
  border: 2px solid;
  border-style: dashed;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-color: #BDBDBD;
}

jquery slideDown / slideUp有多个div

2 个答案: