Question

朋友你好！

我最初点击slide down（图片）button菜单时遇到问题<a id="js-cat" class="js-cat"></a>它有效，但是slides down并立即{ {1}}再次，我还没打算做。例如，我的目标是使其具有响应性;如果用户在它应该向下滑动时点击slides up（图像），如果用户要点击它两次，它应该再次向上滑动。

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

这是我的HTML：

button

CSS

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

和jQuery：

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

Answer 1

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

＆＃13;

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

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

如何制作正确的jQuery滑下菜单？

1 个答案: