3

我正在制作一个可折叠的树视图。我做到了，我只需要我的+和-图标在被点击时切换。

当我使用 jQuery 使用以下代码将图标从 更改+为时，我做了部分工作：-

$(this).attr('src','../images/expand.gif');

问题是，当我再次单击节点时，我不知道如何让它变回原来的样子:)

4

4 回答 4

8

这应该有效：

<style>
.expand{
    content:url("http://site.com/expand.gif");
}
.collapse{
    content:url("http://site.com/collapse.gif");
}
</style>

<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>
于 2013-03-12T18:08:15.667 回答
3

寻找 jquery 函数 toggleClass :)

http://jsfiddle.net/Ceptu/

html:

<div id="box">

    Hello :D

</div>

查询：

$("#box").click(function () {
    $(this).toggleClass("red");
});

CSS：

#box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.red {
   background-color: red !important;
}

记住！important 真的很重要！！！

很多方法可以做到这一点：D

于 2013-03-12T18:04:34.610 回答
1

我想在不上课的情况下做到这一点。在您的点击事件函数中，您可以执行以下操作：

if($(this).attr('src') == '../images/collapse.gif')
   $(this).attr('src', '../images/expand.gif');
else
   $(this).attr('src', '../images/collapse.gif');
于 2014-03-12T16:20:38.777 回答
0

添加 plus 作为默认的 img src 然后定义一个减号类以将图像源更改为减号图像

$("selector_for_your_link").click(function () {
      $(this).toggleClass("minus-class");
    });
于 2013-03-12T18:18:22.247 回答