Question

我有一个+图标和一个 - 图标。当有人点击+图标时，会出现一个框，图标会变为 - 图标。如果他们再次点击该框就会消失，图标会变为+图标。

这是我尝试的代码，但它不起作用......

$("#box").toggle(function(e){
        $("#icon").attr ("src","/images/icon_expand.png")
    },
    function(e) { 
        $("#icon").attr("src","/images/icon_retract.png")
    }
);

有什么想法吗？

谢谢！

Answer 1

.toggle()函数将click处理程序附加到元素，而不是事件处理程序，然后元素切换为可见，它应附加到#icon，如下所示：

$("#icon").toggle(function(){
  $("#box").hide();
  this.src = "/images/icon_expand.png";
}, function() { 
  $("#box").show();
  this.src = "/images/icon_retract.png";
});

Answer 2

$.togle ()切换匹配元素的可见性。所以你完全错了。

你必须做这样的事情：

$( '#icon' ).click ( function () {
    var $this = $( this );
    var $box = $( '#box' );

    $box.toggle ();

    if ( $box.is ( ':visible' ) === true ) {
        $this.attr ( "src", "/images/icon_retract.png" );
    } else {
        $this.attr ( "src", "/images/icon_expand.png" );
    }
} );

Answer 3

我认为，尼克代码会有一个更正，然后它会正常工作你必须首先显示该框，然后在第二次点击时你必须隐藏它，如果是这样的话，
然后尝试这个

$（ “＃图标”）。切换（函数（）{
       的 $（ “＃盒”）显示（）;
    this.src =“/ images / icon_expand.png”;
  }，function（）{
   。的 $（ “＃盒”）隐藏（）;
         this.src =“/ images / icon_retract.png”;
  }）;

JQuery Toggle＆amp;图片

3 个答案: