Jquery可摺疊區域

我正在嘗試使頁面的各個部分可摺疊。沒有計劃使用手風琴，但簡單的隱藏/節目來節省屏幕空間。請參閱下面的示例代碼。第一個鏈接必須點擊兩次以使該部分隱藏，而第二個鏈接正常工作。忽略這個問題，如果你可以建議一個更好的方法來做到這一點。在這個例子中，div1處於打開位置，div2隱藏起初。Jquery可摺疊區域

謝謝， bsr。

<!doctype html> 
<head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
</head> 

<body> 

<a class="toggle" href="#">Hide</a> 
<div class="toggle"> 
    <p>First div</p> 
</div> 

<a class="toggle" href="#">Show</a> 
<div class="toggle" style="display: none"> 
    <p>Second div</p> 
</div> 


<script type="text/javascript"> 
jQuery().ready(function() { 
    $("a.toggle").toggle( 
     function() { 
      $(this).text("Hide"); 
      $(this).next("div.toggle").show(); 
     }, 
     function() { 
      $(this).text("Show"); 
      $(this).next("div.toggle").hide(); 
     } 
    ); 
}); 
</script> 
</body> 
</html>

來源

2011-05-08 bsr

我會用toggle()功能，因爲它不僅用來綁定觸發的事件，它也切換可視性被稱爲不帶任何參數：

jQuery().ready(function() { 
    $("a.toggle").click(function(){ 
     var $div = $(this).next("div.toggle"); 
     $div.toggle(); 
     if($div.is(':visible')) 
      $(this).text('Hide'); 
     else 
      $(this).text('Show'); 
    }); 
});

與您的代碼的問題是你顯示/隱藏元素，而不管它們的初始狀態如何。無論你做什麼，如果你使用toggle(func, func)綁定事件，第一個函數將總是被首先調用。

來源

2011-05-08 16:53:32 DarthJDG

我可以擴大該更新的鏈接文本（顯示/隱藏），以及？ – bsr 2011-05-08 17:02:12

當然，我編輯了我的答案。 – DarthJDG 2011-05-08 17:14:21

第一個需要點擊兩次的原因是因爲它從div顯示開始。當你第一次點擊它時，由於toggle event的性質，jQuery認爲你試圖展示它。但它已經顯示。所以這些更改都不會生效。

你可以通過隱藏所有的東西來解決這個問題。但如果這不是一種選擇，那麼你就必須廢除切換事件監聽器，只是聽點擊：

$('a.toggle').click(function() { 
    var $this = $(this); 
    if ($this.text() === 'Show') { 
     $this.text('Hide').next('div.toggle').show(); 
    } else { 
     $this.text('Show').next('div.toggle').hide(); 
    } 
});

來源

2011-05-08 16:57:10 sdleihssirhc

Jquery可摺疊區域

回答

相關問題