如何制作正确的 jQuery 向下滑动菜单?

Posted

技术标签:

【中文标题】如何制作正确的 jQuery 向下滑动菜单?【英文标题】:How to make proper jQuery slide down menu ? 【发布时间】:2017-05-04 05:09:38 【问题描述】:

朋友们好!

当我最初点击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();
    );
);

【问题讨论】:

【参考方案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>

【讨论】:

【参考方案2】:

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

【讨论】:

这没有提供问题的答案。一旦你有足够的reputation,你就可以comment on any post;相反,provide answers that don't require clarification from the asker。 - From Review

以上是关于如何制作正确的 jQuery 向下滑动菜单?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Jquery 的翻转效果

jquery制作移动端菜单栏左右滑动

使用 jquery 滑动菜单

如何在jQuery Mobile中向上滑动并向下滑动事件? [重复]

如何在导航栏菜单中实现平滑的向下滑动效果

如何向下滑动高度为 100vh 的移动菜单?