Question

我有结构：

<div class="main-class">
 <p class="cp_view_card_details"> Click </p>
</div>
<div class="cp_expanded_view">
   <!-- Information -->
</div>

重复3次。在Css：

.cp_expanded_view {
  display:none;
}

所以我想用cp_expanded_view类扩展最接近的元素。我的jQuery：

jQuery(document).ready(function($) {
  $(".cp_view_card_details").click(function() {

    $(this).next('.cp_expanded_view').slideToggle('2000',
      function() {

      });

  });
});

jQuery代码不起作用，并且不显示任何错误。如何让最近的cp_expanded_view出现？

Answer 1

使用parent查找下一个愿望课程。 cp_expanded_view类位于main-class类的旁边。

jQuery(document).ready(function($) {
$(".cp_view_card_details").click(function() {
$(this).parent().next('.cp_expanded_view').slideToggle('2000', function() {

 });

  });
});

.cp_expanded_view {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-class">
  <p class="cp_view_card_details"> Click </p>
</div>
<div class="cp_expanded_view">
  Show Hidden info
  <!-- Information -->
</div>

用class扩展最近的div

1 个答案: