javascript - 添加 SlideToggle 效果下拉菜单

Question

我有这个 jQuery 下拉菜单。我在尝试使其具有向下滑动切换效果时遇到困难(如下所示: http://jsfiddle.net/LaSsr/188/ )。如果有人可以将这种类型的幻灯片效果应用到下面的 JSfiddle 中，我们将非常感激。谢谢:)

JSFIDDLE

https://jsfiddle.net/6mWZa/182/

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };





  $(document).on('click.dropdown touchstart.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="language" class="dropdown">
  <a href="#language" class="dropdown-toggle">English</a>
  <div class="dropdown-menu">
    <div class="dropdownCool">
      Hello1
    </div>
  </div>
</div>

<div id="locale" class="dropdown">
  <a href="#locale" class="dropdown-toggle">
        
        London</a>
  <div class="dropdown-menu">
    <div class="dropdownCool">
      Hello2
    </div>
  </div>
</div>

Answer 1

如果您还无法解决该问题，请检查这是否有用

/* dropdown */
.dropdown-menu {
    position:absolute;
    top:50px;
    right:0;
    left:0;
    display
    margin:0;
    padding:0;
    width:100%;
    list-style-type:none;
    width:100%;
    background-color:red;
   height:0px;
   transition:  height 0.15s ease-out;
   overflow: hidden;
}

将其添加到您的 .dropdown-menu 类中，并

.dropdown-open > .dropdown-menu {

          height: 400px;
        transition:  height 0.25s ease-in;
    }

我已从样式中删除了“不显示”，并添加了高度 0 和溢出隐藏

请检查您更新的 fiddle https://jsfiddle.net/6mWZa/186/