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

<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>

.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; ???????}

 ?<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>