Javascript JQuery切换功能仅在第一次单击时起作用_Javascript_Jquery_Html_Asp.net

Javascript JQuery切换功能仅在第一次单击时起作用

javascript jquery html asp.net

Javascript JQuery切换功能仅在第一次单击时起作用,javascript,jquery,html,asp.net,Javascript,Jquery,Html,Asp.net,我在使用JQuery切换函数时遇到问题。据我所知，执行切换功能应该隐藏当前显示的div，并显示当前隐藏的div。目前，我的切换功能不起作用，因为当我单击按钮引发事件时，它只起作用一次，再次单击后，它不起任何作用，因此基本上它只是永久隐藏了不理想的div div中有很多东西，包括一张图片和JQuery手风琴，但是隐藏效果非常好我还应该提到，我是在一个asp.net项目中这样做的，以防可能与此有关下面是需要隐藏的div的html代码和使切换功能运行的按钮： <div id="sidebar

我在使用JQuery切换函数时遇到问题。据我所知，执行切换功能应该隐藏当前显示的div，并显示当前隐藏的div。目前，我的切换功能不起作用，因为当我单击按钮引发事件时，它只起作用一次，再次单击后，它不起任何作用，因此基本上它只是永久隐藏了不理想的div

div中有很多东西，包括一张图片和JQuery手风琴，但是隐藏效果非常好

我还应该提到，我是在一个asp.net项目中这样做的，以防可能与此有关

下面是需要隐藏的div的html代码和使切换功能运行的按钮：

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

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

作为记录，我已经使用hide（）和show（）方法在点击按钮时测试了这个方法，并且它也只工作了一次

感谢您对我的帮助……

您为什么打电话给

.toggle（'slide'）

？调用

.toggle（）

以显示/隐藏，或调用

调用.slideToggle（）

以滑动切换

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

谢谢

试试下面的一个，它适合我

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


无标题文件
截击球
足球
垒球
高尔夫球
.hidden{显示：无；}
$（“#显示隐藏按钮”）。单击（函数（）{
$（“#侧边栏左p”）.toggle（）；
});

使用

runat=“server”

将使按钮的作用类似于服务器控件。我猜它也会调整单击事件。

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

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>

呈现为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。这消除了您的回发。

锚通常会重定向到另一个页面，这是他们所做的，只是在切换时让它看起来很酷，我尝试过不使用幻灯片，但也有同样的问题。。。

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ShowHideButton.Attributes.Add("onClick", "return false;");
    }
}

<a onclick="return false;" id="ShowHideButton" href="javascript:__doPostBack('ShowHideButton','')"><span class="ui-icon ui-icon-circle-triangle-w"></span>Hide Menu</a>