如何解决jquery toggle 只工作一次并且没有关闭
我是 js 和 jquery 的新手, 我正在尝试打开和关闭某个菜单,它在第一次点击时打开,但在我再次点击后没有关闭。
$(document).ready(function(){
$("#toggle-menu").click(function(){
$("#btn").toggle(1000);
});
另一件奇怪的事情是,如果我在 1 秒切换结束前单击,它会起作用并关闭
<div id="toggle-menu" ">
<input type="checkBox" id="check">
<label for="check" onclick="event.stopPropagation();">
<i class="fa fa-bars fa-2x i_dynm" aria-hidden="true"></i>
</label>
</div>
<div id="btn">
<li id="btnli">
<button>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
something
</button>
</li>
<li><button class="mb">something</button></li>
<li>
<button>
<i class="fa fa-question-circle" aria-hidden="true"></i>something else
</button>
</li>
</div>
解决方法
我建议浏览一次 jQuery 文档。此外,由于 .click(function(){
不完整,上面的代码将引发错误。我还建议改用 .on
。
$(document).ready(function(){
$("#toggle-menu").on('click',function(){
$("#btn").toggle(1000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle-menu">
Toggle
</button>
<button id="btn">
Button
</button>
好的,您可能需要详细说明您想要实现的目标。我看到你是基于一个复选框?我可以问为什么吗?可能不是处理内部具有可点击项目的容器上的点击事件的最佳方式。我建议绑定到复选框或使用按钮代替。但无论如何,您可能必须改用 slideUp 和 SlideDown 并检查复选框是否已选中。使用下面的代码,它会记住您已经完成了多少次点击并多次显示/隐藏菜单。您可以添加另一个检查并禁用单击,直到动画完成。
$(document).ready(function(){
$("#toggle-menu").click(function(){
var isChecked = $("#check").is(":checked");
if(isChecked){
$("#btn").slideDown(1000);
}else{
$("#btn").slideUp(1000);
}
});
});
#btn{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toggle-menu">
<input type="checkbox" id="check">
<label for="check" onclick="event.stopPropagation();">
<i class="fa fa-bars fa-2x i_dynm" aria-hidden="true"></i>
</label>
</div>
<div id="btn">
<li id="btnli">
<button>
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
something
</button>
</li>
<li><button class="mb">something</button></li>
<li>
<button>
<i class="fa fa-question-circle" aria-hidden="true"></i>something else
</button>
</li>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。