如何制作正确的 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 向下滑动菜单?的主要内容,如果未能解决你的问题,请参考以下文章