slideToggle不适用于.sibling方法

Question

我想让隐藏的div显示时，一个标题被点击。我选择了jQuery来使用slideToggle来完成这个任务。我设置为有一个类的“点击-2”，而div是类“技能-谈话_持有者”，其内容被设置为被CSS隐藏。有多个div与类的“技能-交谈_持有者”，所以我必须使用的东西，将只打开一个在一次，而不是所有的当“点击-2”被点击。

然而，唯一发生的事情是页面重新加载(只需到顶部，而不是使用新的HTTP )。

这是我的代码：

<script type="text/javascript">
$(document).ready(function() {
    $('.clicker-2').click(function() {
        $(this).siblings('div').slideToggle("slow");
    });
});
</script>           

和HTML

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

Answer 1

考虑到您的评论，您可以使用.nextAll()

​

$(document).ready(function() {
  
  $('.clicker-2').click(function(event) {
      event.preventDefault();
      $('.skill-talk_holder').slideUp('slow'); 
      $(this).parent().nextAll('.skill-talk_holder:eq(0)').slideToggle('slow');
  });
});

.skill-talk_holder {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

<div class="divider">
    <a href="#" class="clicker-2"><h3 class="title">Non-Coding Web Skills</h3></a>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
    content content content
</div>

​

Answer 2

只是缺少家长选择器：

$(this).parents('.divider:first').siblings('div').slideToggle("slow");