javascript - 当面板已经打开时滑动切换面板(向下滑动)

Question

如何解决第二次点击 .flip 关闭(向上滑动)面板的问题？

如您所见，我可以滑动切换所有面板，但是当我尝试关闭打开的面板时，首先关闭它然后重新打开它。

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").slideUp("slow");
    $(this).next(".panel").slideToggle("slow");
  });
});

.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 5px;
  text-align: center;
  background-color: #ddd;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Flip 1</div>
<div class="panel">Hello Flip 1!</div>
<div class="flip">Flip 2</div>
<div class="panel">Hello Flip 2!</div>
<div class="flip">Flip 3</div>
<div class="panel">Hello Flip 3!</div>
<div class="flip">Flip 4</div>
<div class="panel">Hello Flip 4!</div>

Answer 1

您可以定位应该是 slideToggle() 和 slideUp() 其他人。

$(document).ready(function() {
  $(".flip").click(function() {
    let $this = $(this).next(".panel");
    $(".panel").not($this).slideUp("slow");
    $this.slideToggle("slow");
  });
});

.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 5px;
  text-align: center;
  background-color: #ddd;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Flip 1</div>
<div class="panel">Hello Flip 1!</div>
<div class="flip">Flip 2</div>
<div class="panel">Hello Flip 2!</div>
<div class="flip">Flip 3</div>
<div class="panel">Hello Flip 3!</div>
<div class="flip">Flip 4</div>
<div class="panel">Hello Flip 4!</div>