JQuery切换功能仅适用于第一次单击
[英]JQuery toggle function only works on first click
问题描述
我在使用JQuery切换功能时遇到问题。 据我所知，执行切换功能应隐藏div（如果当前显示）并显示div，如果它当前是隐藏的。 目前我的切换功能不起作用，因为当我单击按钮导致事件时它只能工作一次，再次点击后它什么也没做，所以基本上它只是永久隐藏了不理想的div。
这个div充满了各种各样的东西，包括一个图像和JQuery手风琴，但隐藏的效果非常好，我想要它。
我还应该提一下，我在asp.net项目中这样做，以防可能与它有任何关系。
下面是html代码，需要隐藏的div和导致切换功能运行的按钮：
<div id="sidebar-left">
<!--All info in here-->
</div>
<asp:LinkButton ID="ShowHideButton" runat="server" CssClass="fg-button fg-button-icon-left ui-state-default ui-corner-all showHide"><span class="ui-icon ui-icon-circle-triangle-w"></span>Hide Menu</asp:LinkButton>
以下是切换使用的javascript代码：
$(document).ready(function () {
$('#ShowHideButton').click(function () {
$('#sidebar-left').toggle('slide');
})
});
我仍然计划添加其他功能，例如在调用切换功能后将按钮上的值更改为“显示菜单”并再次返回隐藏，但这将在我解决菜单保持隐藏的问题后发生。
为了记录，我只需点击一下按钮就可以使用hide（）和show（）方法测试它，它也只能工作一次。
感谢我的任何帮助......
5 个解决方案
解决方案1
1 2015-02-24 11:52:17
runat="server"将使按钮充当服务器控件。 我猜它也会调整点击事件。
解决方案2
1 已采纳 2015-02-24 11:58:32
问题是回发所以请执行以下操作：
ASPX代码：
<asp:LinkButton ID="ShowHideButton" runat="server" CssClass="fg-button fg-button-icon-left ui-state-default ui-corner-all showHide"><span class="ui-icon ui-icon-circle-triangle-w"></span>Hide Menu</asp:LinkButton>
代码背后：
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ShowHideButton.Attributes.Add("onClick", "return false;");
}
}
呈现为HTML的是：
<a onclick="return false;" id="ShowHideButton" href="javascript:__doPostBack('ShowHideButton','')"><span class="ui-icon ui-icon-circle-triangle-w"></span>Hide Menu</a>
在这种情况下，会发生什么是onclick功能成为您的验证器。 如果为false，则不执行“href”链接; 但是，如果确实如此，href将被执行。 这消除了你的回发。
解决方案3
0 2015-02-24 11:44:21
尝试下面一个，它适合我，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<div id="sidebar-left">
<p>Volley Ball</p>
<p>Foot Ball</p>
<p>Base Ball</p>
<p>Golf</p>
</div>
<input type="button" id="ShowHideButton" />
</body>
<style>
.hidden{display:none;}
</style>
<script>
$('#ShowHideButton').click(function(){
$('#sidebar-left p').toggle();
});
</script>
</html>
解决方案4
-1 2015-02-24 11:37:00
你为什么叫.toggle('slide') ？ 调用.toggle()来显示/隐藏或.slideToggle()来滑动切换
解决方案5
-1 2015-02-24 11:41:04
尝试这个
$(document).ready(function () {
$('#ShowHideButton').click(function () {
$('#sidebar-left').slideToggle();
})
});
http://api.jquery.com/slidetoggle/
谢谢
JQuery Toggle适用于第一次点击但不会再次（正如预期的那样）
[英]JQuery Toggle works on first click but not again (as expected)
jquery .slidetoggle（）和.toggle（）在一起，第一次点击什么都不做，然后在那之后工作
[英]jquery .slidetoggle() and .toggle() together, first click does nothing then works after that
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.