切換按鈕，切換和知名度

Question

我使用這個jQuery來隱藏DIV：

$("#slider").click(function() { 
    $(".help").slideToggle(); 
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#slider a").text($(this).is(':visible') ? "Hide" : "Show"); 
    }); 
}); 

而不是改變文本顯示我想要顯示的圖形，我希望grpahic來改變基礎上，.toggle

當前HMTL：

<div id="wrapper"> 
    LI ITEMS 
</div> 

<div class="help"> 
    IMAGE 
</div> 

<div id="slider"> 
    <a href="#">Hide</a> 
</div> 

我想兩個圖像添加到.slider，去除<a>：

<div id="slider"> 
<img class="show" title="Hide" alt="Hide" src="images/showbutton.png" /> 
<img class="hide" title="Hide" alt="Hide" src="images/hidebutton.png" /> 
</div> 

也許我可以使用css來隱藏'隱藏'按鈕，然後用某種方式切換使用jquery？

有什麼建議嗎？

Answer 1

您可以隱藏一個最初通過CSS，則只需撥動你的功能了兩下，用這個CSS：

.hide { dislay: none; } //Reverse if "Hide" should be the default button 

這jQuery的，使用.toggle()（不帶任何參數，就會切換可見性）：

$("#slider").click(function() { 
    $(".help").slideToggle(); 
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { 
    $("#slider img").toggle(); 
    }); 
}); 

這將切換兩個圖像的可見性...因爲一個人的隱藏，你只有2，它有效地交換他們。另外請確保修復您的alt/title屬性.show一個用於屏幕閱讀器的人:)