仿淘宝页面 点击元素 收起或展开内容 js 兼容各标准浏览器和IE高低版本

Posted 2020-10-06 理想程序员

html代码块如下：

<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 href="#">按销量</a><a href="#">按价格</a><a href="#">按商品</a><a href="#">按收藏</a></div>
            </div>
            <div class="cf_upgradedClass">
                <div class="cf_listATitle"><i>-</i><span>各种水果</span></div>
                <div class="cf_upClassList">
                    <a href="#"><i>&#62;</i><span>奇异果</span></a>
                    <a href="#"><i>&#62;</i><span>车厘子/樱桃</span></a>
                    <a href="#"><i>&#62;</i><span>芒果</span></a>
                    <a href="#"><i>&#62;</i><span>牛油果</span></a>
                    <a href="#"><i>&#62;</i><span>火龙果</span></a>
                    <a href="#"><i>&#62;</i><span>苹果</span></a>
                    <a href="#"><i>&#62;</i><span>橙子</span></a>
                    <a href="#"><i>&#62;</i><span>凤梨</span></a>
                    <a href="#"><i>&#62;</i><span>榴莲</span></a>
                    <a href="#"><i>&#62;</i><span>山竹</span></a>
                    <a href="#"><i>&#62;</i><span>木瓜</span></a>
                    <a href="#"><i>&#62;</i><span>柠檬</span></a>
                    <a href="#"><i>&#62;</i><span>百香果</span></a>
                </div>
            </div>
            <div class="cf_upTextBooks">
                <div class="cf_listATitle"><i>-</i><span>各种蔬菜</span></div>
                <div class="cf_upClassList">
                    <a href="#"><i>&#62;</i><span>土豆</span></a>
                    <a href="#"><i>&#62;</i><span>番薯</span></a>
                    <a href="#"><i>&#62;</i><span>山药</span></a>
                    <a href="#"><i>&#62;</i><span>莲藕</span></a>
                    <a href="#"><i>&#62;</i><span>净菜</span></a>
                </div>
            </div>
        </div>
    </div>

CSS代码块如下：

.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;
            margin: 0 8px 0 0;
            text-decoration: none;
            color: #666666;
        }
        .cf_upClassList {
            padding: 10px 0;
        }
        .cf_upClassList>a {
            display: block;
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            color: #666666;
            margin: 0 0 15px 0;
            text-decoration: none;
        }
        .only_flagShip:hover,
        .cf_agClassFi>a:hover,
        .cf_upClassList>a:hover{
            color: #e4393c;
        }
        .cf_upClassList>a:last-child{
            margin: 0;
        }
        .cf_upClassList>a>span {
            margin: 0 0 0 4px;
        }
        .cf_upClassList>a>i {
            font-style: normal;
        }
        .only_title {
            font-size: 14px;
            color: #666666;
            height: 40px;
            background: #f7f7f7;
            line-height: 40px;
            padding: 0 10px;
            font-weight: bold;
            border-bottom: 1px solid #e0e0e0;
        }
        .cf_list{
            padding: 0 10px 10px 10px;
        }

js代码块如下：

  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(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 显示
        })
    </script>