javascript - jQuery 如何使用切换函数来循环中的元素

Question

我正在对 4 个 div 的元素使用切换功能。当我点击第二个时，我需要关闭上一个 div。我该怎么做？

$(document).ready(function() {
  var $this = $(document).find('.slider-div');
  var $thiz = $('.money-transf');

  $('.money-transf').click(function(e) {
    for (var i = 0; i < $this.length; i++) {
      // here i need to add toggle function to $this[i] elements;
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
  <p>Element</p>
</div>
<div class='slider-div'>
  <p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
  <p>Inform about element2</p>
</div>

Answer 1

你不需要循环。在切换与单击的 .money-transf 相关的元素之前，您只需在所有其他 .slider-div 元素上调用 slideUp() ，像这样:

$(document).ready(function() {
  var $slider = $('.slider-div');
  var $transf = $('.money-transf');

  $transf.click(function(e) {
    var $target = $(this).next('.slider-div');
    $slider.not($target).slideUp();
    $target.slideToggle();
  });
})

.slider-div {
  display: none;
}

p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
  <p>Element</p>
</div>
<div class="slider-div">
  <p>Inform about element</p>
</div>
<div class="money-transf">
  <p>Element2</p>
</div>
<div class="slider-div">
  <p>Inform about element2</p>
</div>

请注意，我将 $this 和 $thiz 变量名更改为更有意义且不易混淆的名称。