如何在单击时将淡入淡入添加到 javascript 下拉列表中

Question

我正在使用这个：https://gist.github.com/nguyenning/f99b38ec9ccdf3b73732 并轻松创建了一个效果很好的下拉菜单，但我希望菜单在单击时淡入和淡出。 这是我尝试过的，但淡入不起作用：

  $(function () {
  var $overlay = $('.overlay');
  var $toggle = $('.toggle-menu');
  var toggleOverlay = function (evt) {
    if (!$(evt.target).closest($overlay).length) {
        $overlay.addClass('hidden');
    } else {
        $(document).one('click', toggleOverlay) .fadeIn(1000);
   }
  }
  $toggle.click(function (evt) {
    evt.preventDefault();
    evt.stopPropagation();
    $overlay.toggleClass('hidden');
    $(document).one('click', toggleOverlay) .fadeIn(1000);
  });
});

Answer 1

.slideToggle(( 函数有效。这是你想要的吗？

$(function () {
  var $overlay = $('.overlay');
  var $toggle = $('.toggle-menu');
  $toggle.click(function () {
    $overlay.slideToggle();
  });
});

.hidden {
  display: none;
}
.container {
  width: 300px;
  padding: 16px;
  margin: auto;
  position: relative;
  
  border-radius: 2px;
  border: 1px solid #ccc;
}
.overlay {
  position: absolute;
  border-radius: 2px;
  border: 1px solid #ccc;
}

  <div class="container">
    <a href="#" class="toggle-menu">Toggle Menu</a>
    <div class="overlay hidden">
      <ul>
        <li>
          <a href="#">Menu 1</a>
        </li>
        <li>
          <a href="#">Menu 2</a>
        </li>
        <li>
          <a href="#">Menu 3</a>
        </li>
      </ul>
    </div>
  </div>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="script.js"></script>