我正在尝试做一个下拉菜单，如果你已经打开了一个菜单，点击另一个菜单，第一个将关闭。 我尝试用SlidetToggle+slideDown和SlideUp来实现这一点。

它可以工作，但是菜单的内容被“切换”了两次。 而且它的过渡并不像我想的那么顺利。

下面是代码:

<div class="section-four-wrap">
  <div class="section-two-text-fields">
    <div class="description-container container-1">
      <h3 class="h3-default">
        <b>Heading</b>
      </h3>
      <span class="text-placeholder">
        Text
      </span>
    </div>
    <div class="description-container container-2">
      <h3 class="h3-default">
        <b>Heading</b>
      </h3>
      <span class="text-placeholder">
        value
      </span>
    </div>
    <div class="description-container container-3">
      <h3 class="h3-default">
        <b>Heading</b>
      </h3>
      <span class="text-placeholder">
        value
      </span>
    </div>
  </div>

null

.h3-default:after {
  content:'';
  display:block;
  width:100vw;
  height:1px;
  background:black;
}


.text-placeholder{
  display:none;
}


$(function () {

    $(".section-two-text-fields .description-container h3").click(function() {


        $(this).next().slideToggle();

        if($('.description-container .text-placeholder:visible').length > 1) {
            $('.description-container .text-placeholder:visible').slideUp();
            $(this).next().slideDown();
        }
    }); 
});

https://jsfiddle.net/bg68jne1/

谢啦！