PROMULGATOR

    两三块

    湖北省武汉市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="classification">
    <div class="cf_commodity only_title">商品分类</div>
    <div class="cf_list">
        <div class="cf_allGoods">
            <div class="cf_listATitle"><i>-</i><span>查看所有商品</span></div>
            <div class="cf_agClassFi"><a>按销量</a><a>按价格</a><a>按商品</a><a>按收藏</a></div>
        </div>
        <div class="cf_upgradedClass">
            <div class="cf_listATitle"><i>-</i><span>各种水果</span></div>
            <div class="cf_upClassList">
                <a><i>&gt;</i><span>奇异果</span></a>
                <a><i>&gt;</i><span>车厘子/樱桃</span></a>
                <a><i>&gt;</i><span>芒果</span></a>
                <a><i>&gt;</i><span>牛油果</span></a>
                <a><i>&gt;</i><span>火龙果</span></a>
                <a><i>&gt;</i><span>苹果</span></a>
                <a><i>&gt;</i><span>橙子</span></a>
                <a><i>&gt;</i><span>凤梨</span></a>
                <a><i>&gt;</i><span>榴莲</span></a>
                <a><i>&gt;</i><span>山竹</span></a>
                <a><i>&gt;</i><span>木瓜</span></a>
                <a><i>&gt;</i><span>柠檬</span></a>
                <a><i>&gt;</i><span>百香果</span></a>
            </div>
        </div>
        <div class="cf_upTextBooks">
            <div class="cf_listATitle"><i>-</i><span>各种蔬菜</span></div>
            <div class="cf_upClassList">
                <a><i>&gt;</i><span>土豆</span></a>
                <a><i>&gt;</i><span>番薯</span></a>
                <a><i>&gt;</i><span>山药</span></a>
                <a><i>&gt;</i><span>莲藕</span></a>
                <a><i>&gt;</i><span>净菜</span></a>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.classification {
    width:227px;
    height:auto;
    border:1px solid #e0e0e0;
    box-sizing:border-box;
    margin:0 0 15px 0;
}
.cf_listATitle {
    font-size:14px;
    height:14px;
    line-height:14px;
    color:#666666;
    padding:10px 0;
    font-weight:700;
    cursor:default;
    border-bottom:1px dashed #e0e0e0;
}
.cf_listATitle>i {
    display:inline-block;
    vertical-align:baseline;
    margin:0 9px 0 0;
    width:10px;
    height:11px;
    font-weight:bold;
    color:#ffffff;
    background:#cccccc;
    line-height:9px;
    font-style:normal;
    text-align:center;
}
.cf_listATitle>span {
    display:inline-block;
}
.cf_agClassFi {
    padding:10px 0;
}
.cf_agClassFi>a {
    display:inline-block;
    font-size:14px;
    height:14px;
    line-height:14px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
 $(function() {
     $(".cf_listATitle").on("click", function() {
         $(this).next().toggle(1000, function() {
             console.log($(this).prev().find("i").text());
             if ($(this).prev().find("i").text() == "-") {
                 $(this).prev().find("i").text("+");
             } else {
                 $(this).prev().find("i").text("-");
             }
         });
     }); // 左侧导航 商品分类 点击隐藏 or 显示
 })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3
 立即下载

仿淘宝页面点击元素收起或展开内容

4
      我的袁嘉怡0
      2020/5/28 14:41:32
      有没有移动端这样的 回复
      两三块0
      2017/9/11 17:33:40

      各位道友：

       经过某位大神的指点后，改过的代码如下：

      $(function() {
     $(".cf_listATitle").on("click", function() {
         $(this).next().stop().toggle(1000, function() {
             console.log($(this).prev().find("i").text());
             if ($(this).prev().find("i").text() == "-") {
                 $(this).prev().find("i").text("+");
             } else {
                 $(this).prev().find("i").text("-");
             }
         });
     }); // 左侧导航 商品分类 点击隐藏 or 显示
 })
      回复
      ymfever0
      2017/9/11 17:08:56
      一直快速点的话，会出现消息队列。需要加stop();
          两三块0
          2017/9/11 17:27:27

          谢谢大神，我试过了，确实如您所说，已经改过了，感谢**：）

      回复