jquery单击dt的时候把dd内容收起来,然后在dt里的图标变--问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-05-27 09:30:07 1966 1

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");
});
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:17:03
    <!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>
    0 0
相关问答

1

回答

菜鸟jquery求救!!?报错

2020-06-22 17:29:25 235浏览量 回答数 1

1

回答

jQuery能否进行日期运算?两个小问题

2016-07-07 10:49:18 1803浏览量 回答数 1

1

回答

jquery ipad 点击事件

2016-07-05 16:23:29 1600浏览量 回答数 1

1

回答

jquery实现的相册怎么处理尺寸不符合要求的图片?

2016-07-05 10:54:51 1546浏览量 回答数 1

1

回答

jQuery touch事件如何同时兼容鼠标的移动?

2016-05-31 10:17:51 2892浏览量 回答数 1

1

回答

使用jquery如何更改图片路径

2016-05-27 11:26:04 1684浏览量 回答数 1

1

回答

jquery如何同时绑定N个事件

2016-03-24 11:18:25 1397浏览量 回答数 1

1

回答

jquery正则实现:输入内容必须含有中文

2016-03-24 09:15:54 1337浏览量 回答数 1

1

回答

jquery 来回替换图片

2016-03-24 08:48:16 1506浏览量 回答数 1

1

回答

Jquery问题,点击一个元素,怎么设置光标在另一个元素里的位置?

2016-03-23 15:13:37 2303浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载