jquery - 切换按钮和切换可见性

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 个，所以它有效地交换了它们。另外，请确保为屏幕阅读器修复 .show 上的 alt/title 属性 :)