如何使jQuery切換？

我使用這個： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle 如何使jQuery切換？

這裏的事情是，我改變按鈕的透明圖像。，並且我想要在隱藏<div>時更改圖像。

例如：圖像是朝下（當我點擊我想要的圖像消失的箭頭）一個箭頭，我希望有一個新的形象指向上方，顯示<div>。

如果你不明白我在這裏有一個圖像： enter image description here 這就是現在發生的事情;你會發現即使當我的div被隱藏時，它也會顯示「隱藏div按鈕」。

在下面的圖片中，你可以看到我想要的！我希望圖像在隱藏到「顯示div」時進行提煉。

Remenber該圖像是png格式

enter image description here

來源

2011-11-29 Dominicanstan

我想你需要看[lipsum]（http://lipsum.lipsum.com/）。 – zzzzBov

有什麼區別？ – Dominicanstan

您提供的鏈接與您提供的圖像無關。也許你需要創建一個http://jsfiddle.net，而不是在http://www.w3schools.com上修改這個例子，這樣你就可以與我們分享你所改變的內容。 – tvanfosson

您可以使用淡入淡出和幻燈片效果之一的toogle。

像這樣：

$('#me').click(function() { 
    var f = $('#pan').is(':hidden') ? 'show' : 'hide'; 
    if (f == 'hide') { 
     $('#pan').slideUp(); 
     $(this).html('Show ▼'); 
    } 
    if (f == 'show') { 
     $('#pan').slideDown(); 
     $(this).html('Hide ▲'); 
    } 
});

見how it works

我個人不喜歡切換功能，所以那種我只是做我自己。我知道你想使用一個圖像，但你仍然可以在代碼中做一點改變。

來源

2011-11-29 02:28:41 Shawn31313

切換功能有什麼問題？ – Purag

我只是不喜歡它。我寧願做我自己的。 – Shawn31313

我編輯w3cschool網站的示例代碼。

見下文。

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("p").toggle(); 
    if($("p").css('display')=='none') 
    { 
     $(this).html('Show!!'); 
    } 
    else 
    { 
     $(this).html('Hide!!'); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 

<button>Hide!!</button> 
<p>This is a paragraph with little content.</p> 
<p>This is another small paragraph.</p> 
</body> 
</html>

來源

2011-11-29 02:16:19 IvoryCirrus

很快！非常感謝！ – Dominicanstan

爲了節省一些代碼，你可以這樣做：

$("button").toggle(function(){ 
    $("div").show(); 
    $(this).html("Hide div."); 
}, function(){ 
    $("div").hide(); 
    $(this).html("Show div."); 
});

Example。

來源

2011-11-29 02:28:12 Purag

如何使jQuery切換？

回答

相關問題