Question

使用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');
  })
});

我仍然计划添加其他功能，例如在调用切换功能后将按钮上的值更改为“显示菜单”，然后再次返回隐藏，但在解决菜单保持隐藏的问题后会发生这种情况。 / p>

为了记录，我只需点击一下按钮就可以使用hide（）和show（）方法对它进行测试，它也只运行一次。

感谢我的任何帮助...

Answer 1

runat="server"将使该按钮充当服务器控件。我猜它也会调整点击事件。

Answer 2

问题是回发所以请执行以下操作：

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将被执行。这消除了你的回复。

Answer 3

尝试低于一，它对我有用，

    <!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>

Answer 4

你为什么打电话给.toggle('slide')？致电.toggle()以显示/隐藏或.slideToggle()以滑动切换

Answer 5

试试这个

$(document).ready(function () {
  $('#ShowHideButton').click(function () {
     $('#sidebar-left').slideToggle();
  })
});

http://api.jquery.com/slidetoggle/

由于

JQuery切换功能仅适用于第一次单击

5 个答案: