Question

我有这个jQuery下拉菜单。我无法尝试让它具有向下滑动切换效果（例如：http://jsfiddle.net/LaSsr/188/）。如果有人可以将这种类型的幻灯片效果应用到下面的JSfiddle，将非常感激。谢谢:)）

的jsfiddle

(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;
    }

我从样式中删除了display none，并添加了height 0和overflow hidden

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

添加SlideToggle效果下拉菜单

1 个答案: