javascript - jQuery 显示/隐藏多个 div

Question

我需要使用 jQuery 展开/折叠 div 的帮助。问题就在这里。

我有一个 HTML 页面，显示汽车名称及其描述，如下所示。

1. 当用户单击任何 carTitle div 时，相应的 carDetail div 应展开(如果已折叠)。当用户再次单击该 div 时，相应的 carDetail div 应折叠。

2. 最初，carToyota div 应在 pageLoad 上展开，而其他 div 则折叠

3. 用户可以同时展开多个 div

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  if (collapsed == true) {
    $(carDetailsDiv).hide();
  } else {
    $(carDetailsDiv).show();
  }

  event.preventDefault();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

上面的代码没有按预期工作。有人可以帮忙吗？

Answer 1

定义您自己的类，名为collapsed，并将其设置为display: none

collapsed {
  display: none;
}

然后，你可以使用jQuery的.toggleClass()切换此类，同时还可以简单地将类添加到 carDetails div 以默认隐藏它们

最后，您可以使用$(this).next()，而不是event.currentTarget.next()

<小时/>

这是演示:

$(".carTitle").on('click', function(e) {
  $(this).next().toggleClass('collapsed');
});

.collapsed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>