jquery使加减号图标切换。前端开发新手求指教!不胜感激~ 200
2个回答
展开全部
你是想最多只有一个展开的组对吧?
这样的话,当你触发你的点击事件展开对应分组的时候,先找到其它展开的分组,将其折叠,同时将其组名前边的减号变成加号,然后再展开你点击的分组。
<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>
大致就是这个思路,细节可能需要对应需求调整。
这样的话,当你触发你的点击事件展开对应分组的时候,先找到其它展开的分组,将其折叠,同时将其组名前边的减号变成加号,然后再展开你点击的分组。
<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>
大致就是这个思路,细节可能需要对应需求调整。
展开全部
可以这么做
html开始
<div class="icon">
<img class="img1" src="加.jpg" />
<img class="img2" src="减.jpg" />
</div>
html结束
css开始
.icon.change .im1,
.icon .img2{
display:none;
}
.icon.change .im2{
display:block;
}
css结束
js开始
$('.icon').click(function(){
$(this).toggleClass("change");
})
js结束
html开始
<div class="icon">
<img class="img1" src="加.jpg" />
<img class="img2" src="减.jpg" />
</div>
html结束
css开始
.icon.change .im1,
.icon .img2{
display:none;
}
.icon.change .im2{
display:block;
}
css结束
js开始
$('.icon').click(function(){
$(this).toggleClass("change");
})
js结束
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询