jquery单击dt的时候把dd内容收起来，然后在dt里的图标变-
jquery收缩的时候如何把 - 的图标 变+ ？
展开的时候把 + 变成 - 的图标？
+是fa-plus-square-o的类标
-是f-minus-square-o的类标
请问如何收缩的时候把f-minus-square-o删除 具体写法是怎么写？
<div class="public-slider">
<dl class="side-btn">
<dt>
<i class="fa fa-minus-square-o fa-plus-square-o"></i>
<a class="dt-1">个人中心</a>
</dt>
</dl>
<dl>
<dt>
<i class="fa fa-minus-square-o"></i>
<a>订单中心</a>
</dt>
<dd><a href="###">我的订单</a></dd>
<dd><a href="###">收藏夹</a></dd>
<dd><a href="###">我的退款</a></dd>
<dd><a href="">收货地址</a></dd>
<dd><a href="">我的购物</a></dd>
</dl>
<dl>
<dt>
<i class="fa fa-minus-square-o"></i>
<a>关注中心</a>
</dt>
<dd><a href="">关注的商品</a></dd>
<dd><a href="">关注的品牌</a></dd>
<dd><a href="">关注的活动</a></dd>
<dd><a href="">浏览历史</a></dd>
</dl>
<dl>
<dt>
<i class="fa fa-minus-square-o"></i>
<a>我的资产</a>
</dt>
<dd><a href="">开抢钱包</a></dd>
<dd><a href="">卡券管理</a></dd>
<dd><a href="">积分管理</a></dd>
</dl>
<dl>
<dt>
<i class="fa fa-minus-square-o"></i>
<a>个人信息管理</a>
</dt>
<dd><a href="">个人资料</a></dd>
<dd><a href="">安全中心</a></dd>
<dd><a href="">管理收货地址</a></dd>
<dd><a href="">我的消息</a></dd>
</dl>
</div>$("dt").click(function(){
$(this).nextAll("dd").removeClass("fa-plus-square-o").slideToggle("hide");
});
展开
收起
1
条回答
写回答
写回答
-
<!DOCTYPE html> <html> <head> <title> test </title> <meta charset="utf-8"> <style> /*默认隐藏*/ .public-slider dl > dd {display: none;} .public-slider .open dt a{color: red;} .public-slider .open > dd{display: block;} </style> </head> <body> <div class="public-slider"> <dl class="side-btn open"> <dt> <i class="fa fa-minus-square-o fa-plus-square-o"></i> <a class="dt-1">个人中心</a> </dt> </dl> <dl> <dt> <i class="fa fa-minus-square-o"></i> <a>订单中心</a> </dt> <dd><a href="###">我的订单</a></dd> <dd><a href="###">收藏夹</a></dd> <dd><a href="###">我的退款</a></dd> <dd><a href="">收货地址</a></dd> <dd><a href="">我的购物</a></dd> </dl> <dl> <dt> <i class="fa fa-minus-square-o"></i> <a>关注中心</a> </dt> <dd><a href="">关注的商品</a></dd> <dd><a href="">关注的品牌</a></dd> <dd><a href="">关注的活动</a></dd> <dd><a href="">浏览历史</a></dd> </dl> <dl> <dt> <i class="fa fa-minus-square-o"></i> <a>我的资产</a> </dt> <dd><a href="">开抢钱包</a></dd> <dd><a href="">卡券管理</a></dd> <dd><a href="">积分管理</a></dd> </dl> <dl> <dt> <i class="fa fa-minus-square-o"></i> <a>个人信息管理</a> </dt> <dd><a href="">个人资料</a></dd> <dd><a href="">安全中心</a></dd> <dd><a href="">管理收货地址</a></dd> <dd><a href="">我的消息</a></dd> </dl> </div> <script src="jquery-1.11.3.min.js"></script> <script> $('body').on('click', 'dt', function(){ //在单击时 切换样式 var i = $('i', this); i.toggleClass('fa-minus-square-o'); //css 中定义一个 open 的样式, 当给 dl 添加这个样式时, dd 显示 //这样不需要用 jQuery去找 当前这个节点下的所有dd, 提高效率 $(this.parentNode).toggleClass('open'); }); </script> </body> </html>2019-07-17 19:17:03赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
