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

Z时代
2024-01-10
分类：问答

我有一个使用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（）方法，只需点击一下按钮，它也只能工作一次。

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

回答：

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

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

回答：

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

回答：

滑动试试这个

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

http://api.jquery.com/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>