slideToggle不能用于.sibling方法

slideToggle not working for .sibling method

本文关键字：方法 sibling 用于 不能 slideToggle      更新时间：2023-09-26

我想让隐藏的div显示当一个标题被点击。我选择了jQuery来完成slideToggle。我设置了一个类"clicker-2"，div是一个类"skill-talk_holder"，它的内容被CSS设置为隐藏。有多个div类的"skill-talk_holder"，所以我必须使用的东西，一次只打开一个，而不是所有的，当"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>

根据您的评论，您可以使用.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>

只是缺少父选择器:

$(this).parents('.divider:first').siblings('div').slideToggle("slow");
相关文章：