在面板已打开（向下滑动）的情况下滑动切换面板的问题

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>