![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
jquery使加减号图标切换。前端开发新手求指教!不胜感激~
节点图标默认是加号,需要在点击后变成减号,我现在能够实现当前的点击效果,但是再点击别的栏目时那个减号不会更换成默认的加号。如图,我想在我点击下面那个框框后上面的那个减号恢...
节点图标默认是加号,需要在点击后变成减号,我现在能够实现当前的点击效果,但是再点击别的栏目时那个减号不会更换成默认的加号。
如图,我想在我点击下面那个框框后上面的那个减号恢复成加号。求大神指教!!!谢谢了~~~~~~~~~~~ 展开
如图,我想在我点击下面那个框框后上面的那个减号恢复成加号。求大神指教!!!谢谢了~~~~~~~~~~~ 展开
3个回答
展开全部
你是想最多只有一个展开的组对吧?
这样的话,当你触发你的点击事件展开对应分组的时候,先找到其它展开的分组,将其折叠,同时将其组名前边的减号变成加号,然后再展开你点击的分组。
<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~
展开全部
您好:这个很简单,就是jquery的选择器的使用而已.
如果你的那个图片是背景图的话例如:
当点击其他第一级后,用jqeury选择器:$(this).siblings().css("background","url(加号的图片地址)");
这样就可以在点击这个的时候,让其他兄弟节点(也就是其他第一级的图片变为加号).
具体代码要根据你的代码来写,有疑问请加我1 5 3 4 9 6 8 7 1 4.
希望采纳,谢谢.
如果你的那个图片是背景图的话例如:
当点击其他第一级后,用jqeury选择器:$(this).siblings().css("background","url(加号的图片地址)");
这样就可以在点击这个的时候,让其他兄弟节点(也就是其他第一级的图片变为加号).
具体代码要根据你的代码来写,有疑问请加我1 5 3 4 9 6 8 7 1 4.
希望采纳,谢谢.
追问
那个图片不是背景图,用的是bootstrap框架开发的------icon-add以及icon-remove
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
点击后变成减号,我现在能够实现
追问
谢谢你及时的一个小回复。是这样的,我现在能够实现的是点击上面那一栏,然后弹出下拉框的同时那个加号变成减号。但是当我点击下面的那个框框上面的就不会恢复了,我想请教一下这个问题,有代码实例就最好了。谢谢了~
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询