我正在使用jQuery在我的HTML页面上隐藏/显示侧边栏。按下<li>
元素时,.toggle("slide")
事件将激活。
<div class="sidebar" id="SideBar"></div>
<!-- elsewhere in code... -->
<li style="//Styling li Button." id="toggle-bar" onclick="toggleEvent();">toggle bar</li>
{
$("#toggle-bar").click(function(){
$("#SideBar").stop().toggle("slide"); // for left to right slide.
});
}
我曾经使用.stop()
在一张幻灯片效果后停止动画,但动画仅在用户首先关注<li>
元素(通过单击它)时发生。
所以,请告诉我如何一键触发动画
假设你展示的 JS 代码是 toggleEvent()
函数的代码块,如下所示:
function toggleEvent() {
$("#toggle-bar").click(function(){
$("#SideBar").stop().toggle("slide"); // for left to right slide.
});
}
问题是,在第一次单击元素时,您附加了事件处理程序。然后在后续单击时附加另一个事件处理程序,并运行任何以前的事件处理程序。这就是为什么它只能在第一次点击后工作。
要实现所需的内容,您可以完全删除 onclick
属性,并直接通过 JS 附加事件处理程序。试试这个:
<li style="" id="toggle-bar">toggle bar</li>
$(function() {
$("#toggle-bar").click(function(){
$("#SideBar").stop().toggle("slide"); // for left to right slide.
});
});
我有点困惑为什么你在同一元素上一起使用html onclick
和jquery的.click()
。
我建议从 html 中删除onclick
并删除.stop()
调用,这样您的动画就会被调用一次,而不是两次。正如其他评论所提到的,最好知道function toggleEvent()
是什么,以便我们可以提供更准确的答案。
您的网页:
<div class="sidebar" id="SideBar"></div>
<!-- elsewhere in code... -->
<li style="//Styling li Button." id="toggle-bar">toggle bar</li>
你的JavaScript:
$("#toggle-bar").click(function(){
$("#SideBar").toggle("slide"); // for left to right slide.
});
或者,如果您需要运行function toggleEvent()
,您的 JavaScript 可能如下所示:
$("#toggle-bar").click(toggleEvent);