Question

jquery使加减号图标切换。前端开发新手求指教！不胜感激~

节点图标默认是加号，需要在点击后变成减号，我现在能够实现当前的点击效果，但是再点击别的栏目时那个减号不会更换成默认的加号。
如图，我想在我点击下面那个框框后上面的那个减号恢复成加号。求大神指教！！！谢谢了~~~~~~~~~~~

Answer 1

你是想最多只有一个展开的组对吧？

这样的话，当你触发你的点击事件展开对应分组的时候，先找到其它展开的分组，将其折叠，同时将其组名前边的减号变成加号，然后再展开你点击的分组。

<ul id="block">
    <li><span class="icon"></span><ul>......</ul></li>
    <li><span class="icon"></span><ul>......</ul></li>
    <li><span class="icon"></span><ul>......</ul></li>
    <li><span class="icon"></span><ul>......</ul></li>
</ul>
//为简化代码，使用jquery
//expand的是展开状态下的图标class
//fold的是展开状态下的图标class
<script>
    $('.icon').on('click', function(){
        var el = $(this);
        if(el.hasClass('expand')){
            el.removeClass('expand').addClass('fold');
            el.next().hide();//对应内容隐藏
        }else{
            $('#block > li > .expand').removeClass('expand').addClass('fold');
            el.removeClass('fold').addClass('expand');
            el.next().show();//显示对应内容
        }
    });
</script>

大致就是这个思路，细节可能需要对应需求调整。

追问

谢谢你的回答！我先试一下哦，待会还有不懂的地方望指教O(∩_∩)O~

Answer 2

您好:这个很简单,就是jquery的选择器的使用而已.
如果你的那个图片是背景图的话例如:
当点击其他第一级后,用jqeury选择器:$(this).siblings().css("background","url(加号的图片地址)");
这样就可以在点击这个的时候,让其他兄弟节点(也就是其他第一级的图片变为加号).
具体代码要根据你的代码来写,有疑问请加我1 5 3 4 9 6 8 7 1 4.
希望采纳,谢谢.

追问

那个图片不是背景图，用的是bootstrap框架开发的------icon-add以及icon-remove

Answer 3

点击后变成减号，我现在能够实现

追问

谢谢你及时的一个小回复。是这样的，我现在能够实现的是点击上面那一栏，然后弹出下拉框的同时那个加号变成减号。但是当我点击下面的那个框框上面的就不会恢复了，我想请教一下这个问题，有代码实例就最好了。谢谢了~