Question

我希望在点击标题时显示隐藏的div。我选择了jQuery来使用slideToggle来完成这项工作。我设置了一个“clicker-2”类，div是类“skill-talk_holder”，其内容设置为由CSS隐藏。有多个div有“skill-talk_holder”类，所以我必须使用一次只打开一个的东西，而不是点击“clicker-2”时的所有div。

然而，唯一发生的事情是页面重新加载（只是转到顶部，而不是使用新的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()

＆＃13;

$(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');
  });
});

＆＃13;

.skill-talk_holder {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

它缺少父选择器：

listAfter = [listBefore[i][:len(listBefore[i])/2] + [str(i+1)] + listBefore[i][len(listBefore[i])/2:] for i in range(len(listBefore))]

slideToggle不适用于.sibling方法

2 个答案: