开发者社区> 问答> 正文

jquery单击dt的时候把dd内容收起来,然后在dt里的图标变-

screenshot
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");
});

展开
收起
小旋风柴进 2016-05-27 09:30:07 2387 0
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
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载