Question

我有以下内容：

<div class="select-plan-container">

<div class="select-plan-column">
  <div class="select-plan-buy select-plan-buy-starter">
  </div>
  <div class="select-plan-buy select-plan-details-starter">
  </div>
</div>

<div class="select-plan-column">
  <div class="select-plan-buy select-plan-buy-level">
  </div>
  <div class="select-plan-details select-plan-details-level">
  </div>
</div>

<div class="select-plan-column">
  <div class="select-plan-buy select-plan-buy-levels">
  </div>
  <div class="select-plan-details select-plan-details-levels">
  </div>
</div>

</div>

JS：

jQuery(document).ready(function(){
  jQuery(".select-plan-buy-starter").click(function() {
    jQuery(".select-plan-details-starter").slideToggle();
  });

  jQuery(".select-plan-buy-level").click(function() {
    jQuery(".select-plan-details-level").slideToggle();
  });

  jQuery(".select-plan-buy-levels").click(function() {
    jQuery(".select-plan-details-levels").slideToggle();
  });

  jQuery('.select-plan-details-levels input[type=checkbox]').on('change', function (e) {
    if (jQuery('.select-plan-details-levels input[type=checkbox]:checked').length > 3) {
      jQuery(this).prop('checked', false);
    }
  });
});

每次用户点击.select-plan-buy时，父div都会展开。现在你可以逐个扩展所有的div。点击.select-plan-column时如何折叠其他人.select-plan-buy？

Answer 1

您可以尝试类似

的内容

$(".select-plan-buy").click(function () {
  $('.select-plan-column .select-plan-details').slideUp();
  $(this).next(".select-plan-details").slideToggle();
});

DEMO，此处在示例中，我使用了select-plan-buy和select-plan-details类

Answer 2

试试这个：

  $('.select-plan-details,.select-plan-buy-starter').hide();
  $(document).on('click','.select-plan-buy',function()
  {
   $('.select-plan-column').not(this).find('.select-plan-details,.select-plan-buy-starter').slideUp();
   $(this).next().slideToggle();
  });

<强> Demo

在点击时折叠同一父级中的其他div

2 个答案: