如何制作合适的 jQuery 下拉菜单？

Question

朋友们大家好！

当我最初点击 button(image) 时，slide down 菜单出现问题，<a id="js-cat" class="js-cat"></a> 它有效，但它 slides down 并立即 slides up 再次，我还没有计划这样做。例如，我的目标是让它响应；如果用户单击 button(image) 一次，它应该向下滑动，如果用户单击它两次，它应该再次向上滑动。

伙计们，我需要你们的帮助。我几乎没有尝试这样做，但最终我无法让我的代码工作。

这是我的 HTML:

<a id='js-mnu' class='js-mnu'></a>
<a id="js-cat" class="js-cat"></a>

CSS

#js-cat {display:block;display:block;width:35px;height:35px;margin:17px  10px; position: absolute;
right: 0;}
.js-cat {background:url(images/cat.png) center center no-repeat;opacity:0.75;}

和jQuery：

$(document).ready(function(){
  $("#js-cat").click(function(){
       $('ul.catalog').slideDown();
    });
  $("#js-cat").click(function(){
       $('ul.catalog').slideUp();
    });
});

Answer 1

您绑定了两次点击事件。你应该只绑定一次并检查菜单是否隐藏或不向上或向下滑动。

$(document).ready(function() {
  $("#js-cat").click(function() {
    var isHidden = $(".menu").is(":hidden");
    if (isHidden) {
      $('.menu').slideDown();
    } else {
      $('.menu').slideUp();
    }
  });


});

body {
  margin: 10px;
}

.menu {
  margin: 10px 0;
  background: #abcdef;
  width: 250px;
  padding: 10px;
}

a {
  cursor: pointer;
  border: 1px solid #555;
  background: #fafafa;
  color: #555;
  padding: 10px;
  display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="js-cat" class="js-cat">Click</a>

<div class="menu">Content: Lorem ipsum</div>

Answer 2

你不能只使用 Toggle 吗？我认为通过切换，您可以在一个按钮上同时获得向下滑动和向上滑动选项。记得在开头用 read(function()) 隐藏它。

如何制作合适的 jQuery 下拉菜单？

How to make proper jQuery slide down menu ?

jquery

html

slidetoggle

slidedown

slideup