JQuery切换功能只适用于第一次点击

我有一个使用JQuery切换功能的问题。据我所知，执行切换功能应该隐藏一个div，如果它当前显示，并显示该div是否当前隐藏。此刻我的切换功能不起作用，因为它只有当我点击按钮导致事件后才起作用，再次点击后它不做任何事情，所以基本上它只是永久隐藏了不理想的div。JQuery切换功能只适用于第一次点击

这个div相当挤满了一大堆东西，包括图片和JQuery Accordion，但是这张皮可以完美的完成我想要的东西。

我还应该提到，我在一个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（）方法，只需点击一下按钮，它也只能工作一次。

明白，来我的方式任何帮助......

来源

2015-02-24 Barry Michael Doyle

一个锚通常重定向到另一个页面，这是他们做的 – adeneo 2015-02-24 11:35:50

问题是回发那么做到以下几点：

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>

在这种情况下，什么哈pClick是onclick功能成为您的验证器。如果它是假的，则不执行“href”链接;然而，如果这是真的，href将被执行。这消除了你的回帖。

来源

2015-02-24 11:58:32 rJ7

-1

你为什么打电话.toggle('slide')？打电话.toggle()显示/隐藏或.slideToggle()来切换

来源

2015-02-24 11:37:00

http://jqueryui.com/toggle/检查这一点。 – Jai 2015-02-24 11:40:09

幻灯片只是让你看起来很酷，当你切换，我已经尝试过没有幻灯片，并有相同的问题... – 2015-02-24 11:44:37

-1

滑动试试这个

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

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

感谢

来源

2015-02-24 11:41:04

试试下面的一个，它为我工作，

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

来源

2015-02-24 11:44:21 Butterfly

runat="server"无线将使按钮像服务器控件一样工作。我想它也会调整点击事件。

来源

2015-02-24 11:52:17 laurensclaessen

JQuery切换功能只适用于第一次点击

回答

相关问题