slideToggle 不适用于 .sibling 方法

Question

我想在单击标题时显示隐藏的 div。我已选择 jQuery 来使用 slideToggle 执行此操作。我将 class 设置为 "clicker-2"，而 div 是 class "skill-talk_holder" 其内容设置为被 [=24= 隐藏]. "skill-talk_holder" 的 class 有多个 div，所以我必须使用一次只能打开一个的东西，而不是在单击 "clicker-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");

slideToggle 不适用于 .sibling 方法

slideToggle not working for .sibling method

javascript

jquery

siblings