首页 > 解决方案 > 用类展开最近的 div

问题描述

我有结构:

<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显示?

标签: jquery

解决方案


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


推荐阅读