Javascript jquerytoggle&；形象

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

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

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

有什么想法吗

谢谢大家!

函数将

单击
处理程序附加到元素，而不是事件处理程序。如果元素切换为可见，则应将其附加到
#图标
，如下所示：

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

$( '#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" );
    }
} );

该函数将
单击
处理程序附加到元素，而不是事件处理程序，如果元素切换为可见，则应将其附加到
#图标
，如下所示：

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

$( '#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" );
    }
} );

切换匹配元素的可见性。所以你使用它是完全错误的

您必须执行以下操作：

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

$( '#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" );
    }
} );

切换匹配元素的可见性。所以你使用它是完全错误的

您必须执行以下操作：

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

$( '#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" );
    }
} );

我认为，尼克代码中会有一个更正，然后它就会正常工作。

您必须首先显示该框，然后在第二次单击时必须将其隐藏，如果是这样，

那就试试这个

$（“#图标”）.toggle（函数（）{

$（“#框”）.show（）；

this.src=“/images/icon\u expand.png”

}，函数（）{

$（“#框”）.hide（）；

this.src=“/images/icon\u retract.png”；

});  

我认为，尼克代码中会有一个更正，然后它就会正常工作。

您必须首先显示该框，然后在第二次单击时必须将其隐藏，如果是这样，

那就试试这个

$（“#图标”）.toggle（函数（）{

$（“#框”）.show（）；

this.src=“/images/icon\u expand.png”

}，函数（）{

$（“#框”）.hide（）；

this.src=“/images/icon\u retract.png”；

});  

请提供更多信息。什么是#icon，你说的“不工作”是什么意思，等等……Hi#icon是更改为+或-#框是通过JQuery切换功能显示和消失的框。请提供更多信息。什么是#icon，你说的“不工作”是什么意思，等等……Hi#icon是更改为+或-#box是通过JQuery切换函数显示和消失的框。@Nick Craver:但这不会使box切换。说清楚，我不是投反对票的人；）即使这是理所当然的：p@Chouchenos-我没有读过这样的问题，我读它是因为其他东西正在使框切换，这是一个试图装配事件处理程序的尝试…尽管如此，我添加了上面的完整示例以消除任何混淆。有趣。这是未记录的功能吗？我在@Frank上找不到它-还有另一个
.toggle（）
重载（比如
.load（）
用于加载内容和加载事件），另一个在这里：@Nick Craver:但这不会使框切换。说清楚，我不是投反对票的人；）即使这是理所当然的：p@Chouchenos-我没有读过这样的问题，我读它是因为其他东西正在使框切换，这是一个试图装配事件处理程序的尝试…尽管如此，我添加了上面的完整示例以消除任何混淆。有趣。这是未记录的功能吗？我在@Frank上找不到它-还有另一个
.toggle（）
重载（比如
.load（）
用于加载内容和加载事件），另一个在这里：像个符咒一样工作！谢谢你，简！哎呀！你的代码可以工作，但有点问题。第一次单击“展开”可以工作，但您需要单击两次才能将其收回。工作起来就像一个符咒！谢谢你，简！哎呀！你的代码可以工作，但有点问题。首先单击“展开”可以工作，但需要单击两次才能将其收回。