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");
    });
});

我想要显示图形，而不是改变文本节目，我希望根据.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隐藏'hide'按钮，然后以某种方式使用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个属性：）

切换按钮和切换可见性

1 个答案: