使用 jQuery 在單擊時切換顯示/隱藏

Question

我有一個div元素，所以當我點擊它時，另一個默認隱藏的div正在滑動和顯示，這是動畫本身的代碼：

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

我怎樣才能做到這一點，所以當我#myelement單擊#myelement時（當元素已經顯示時）它會像這樣隱藏#another-element ：

$('#another-element').hide("slide", { direction: "right" }, 1000); ?

所以基本上，它應該像slideToggle一樣工作，但具有show/hide功能。 那可能嗎？

Answer 1

切換事件在 1.8 版中已棄用，並在 1.9 版中刪除

~~試試這個...~~

 $('#myelement').toggle( function () { $('#another-element').show("slide", { direction: "right" }, 1000); }, function () { $('#another-element').hide("slide", { direction: "right" }, 1000); });

注意：此方法簽名在 jQuery 1.8 中已棄用，並在 jQuery 1.9 中刪除。 jQuery 還提供了一個名為 .toggle() 的動畫方法，用於切換元素的可見性。 是否觸發動畫或事件方法取決於傳遞的參數集， jQuery 文檔。

提供 .toggle() 方法是為了方便。 手動實現相同的行為相對簡單，如果 .toggle() 中內置的假設證明是有限的，那么這可能是必要的。 例如，如果將 .toggle() 應用於同一元素兩次，則不能保證其正常工作。 由於 .toggle() 在內部使用點擊處理程序來完成它的工作，我們必須解除點擊綁定以移除附加到 .toggle() 的行為，因此其他點擊處理程序可能會陷入交火中。 該實現還會在事件上調用 .preventDefault()，因此如果在元素上調用了 .toggle()，則不會跟蹤鏈接並且不會單擊按鈕， jQuery 文檔

您可以在使用顯示的可見性和單擊隱藏之間切換。 如果元素可見，您可以設置可見性條件，然后隱藏否則顯示它。 請注意，您將需要jQuery UI才能使用顯示/隱藏類似方向的附加效果。

現場演示

$( "#myelement" ).click(function() {     
    if($('#another-element:visible').length)
        $('#another-element').hide("slide", { direction: "right" }, 1000);
    else
        $('#another-element').show("slide", { direction: "right" }, 1000);        
});

或者，只需使用切換而不是單擊。 通過使用切換，您將不需要條件 (if-else) 語句。 正如 TJCrowder 所建議的那樣。

現場演示

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});

Answer 2

利用 jquery 切換功能為您完成任務

.toggle() - 顯示或隱藏匹配的元素。

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });

Answer 3

這對你有用

   $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });

Answer 4

您可以使用.toggle()函數代替.toggle() .click() ....

Answer 5

您可以使用此代碼來切換元素var ele = jQuery("yourelementid"); ele.slideToggle('慢'); 這對你有用:)

Answer 6

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script>        <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>

Answer 7

$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

現場演示

使用 jQuery 在單擊時切換顯示/隱藏

問題描述

7 個解決方案

解決方案1
58 已采納 2012-04-25 06:54:17

切換事件在 1.8 版中已棄用，並在 1.9 版中刪除

解決方案2
29 2012-04-25 06:55:15

解決方案3
3 2014-12-04 08:04:42

解決方案4
0 2012-04-25 06:56:46

解決方案5
0 2012-04-25 07:01:17

解決方案6
0 2021-01-26 11:14:36

解決方案7
-3 2015-02-18 10:59:14

使用 jQuery 在單擊時切換顯示/隱藏

問題描述

7 個解決方案

解決方案1 58 已采納 2012-04-25 06:54:17

切換事件在 1.8 版中已棄用，並在 1.9 版中刪除

解決方案2 29 2012-04-25 06:55:15

解決方案3 3 2014-12-04 08:04:42

解決方案4 0 2012-04-25 06:56:46

解決方案5 0 2012-04-25 07:01:17

解決方案6 0 2021-01-26 11:14:36

解決方案7 -3 2015-02-18 10:59:14

解決方案1
58 已采納 2012-04-25 06:54:17

解決方案2
29 2012-04-25 06:55:15

解決方案3
3 2014-12-04 08:04:42

解決方案4
0 2012-04-25 06:56:46

解決方案5
0 2012-04-25 07:01:17

解決方案6
0 2021-01-26 11:14:36

解決方案7
-3 2015-02-18 10:59:14