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切換功能只適用於第一次點擊

回答

相關問題