Question

我正在使用这个： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

这里的事情是我将按钮更改为透明图像。并且我希望隐藏<div>时图像会发生变化。

例如：图像是一个向下的箭头（当我点击箭头我希望图像消失）我想要一个新图像指向显示<div>。

如果你不明白我有一张图片： enter image description here 这就是现在发生的事情;你看，即使隐藏了我的div，它也会显示“隐藏div按钮”。

在下面的图片中，您可以看到我想要的东西！当隐藏到“show div”时，我希望图像能够显示。

请注意图像为.png

enter image description here

Answer 1

您可以使用其中一种效果（例如淡化和幻灯片）。

像这样：

$('#me').click(function() {
    var f = $('#pan').is(':hidden') ? 'show' : 'hide';
    if (f == 'hide') {
        $('#pan').slideUp();
        $(this).html('Show ▼');
    }
    if (f == 'show') {
        $('#pan').slideDown();
        $(this).html('Hide ▲');
    }
});

请参阅how it works

我个人不喜欢切换功能，所以我只想做自己的。我知道你想使用一个图像，但你仍然可以通过代码中的一点改变来做到这一点。

Answer 2

我正在编辑w3cschool网站的示例代码。

见下文。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
    if($("p").css('display')=='none')
    {
      $(this).html('Show!!');
    }
    else
    {
      $(this).html('Hide!!');
    }
  });
});
</script>
</head>
<body>

<button>Hide!!</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

Answer 3

要保存一些代码，您可以使用：

$("button").toggle(function(){
   $("div").show();
   $(this).html("Hide div.");
}, function(){
   $("div").hide();
   $(this).html("Show div.");
});

Example

如何制作jQuery Toggle？

3 个答案: