切换按钮，切换和知名度

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一个用于屏幕阅读器的人:)