切换按钮和切换可见性 [英] Toggle button and Toggle visibility

问题描述

我正在使用此jQuery隐藏DIV:

I'm using this jQuery to hide a DIV:

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

我不想改变文本显示，而是要根据.toggle

Instead of altering the text show I want to display a graphic, I want the grpahic to change based on the .toggle

当前HMTL:

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

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

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

我想将两个图像添加到.slider中，删除<a>:

I'd like to add two images into .slider, removing the <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进行切换?

Perhaps I can use css to hide the 'hide' button, then switch that using jquery in some way?

有什么建议吗?

推荐答案

最初可以通过CSS隐藏一个，然后只需在函数中切换两个即可，将其用于CSS:

You can hide one initially via CSS, then just toggle the two in your function, use this for CSS:

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

这个jQuery使用 .toggle() (不带参数，它将切换可见性):

And this jQuery, using .toggle() (without arguments, it toggles visibility):

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

这将切换两个图像的可见性...由于一个图像被隐藏，而您只有2个，因此有效地交换了它们.还请确保将alt/title属性固定在屏幕阅读器人员的.show上:)

This would toggle the visibility of both images...since one's hidden and you only have 2, it effectively swaps them. Also make sure to fix your alt/title attributes on the .show one for the screen reader folks :)

这篇关于切换按钮和切换可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！