通过判断自定义属性的值给出不同的样式
点击更多, 展开缩小 brand <div class="brand clearfloat"> <dl class="clearfloat"> <dt class="fl"> <a href="javascript:;">品牌:</a></dt> <dd class="clearfloat"> <a href="javascript:;">全部</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;" class="select">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">全部</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;" class="select">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">全部</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;" class="select">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">全部</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;" class="select">A3复印纸</a> <a href="javascript:;">A3复印纸</a> <a href="javascript:;">A3复印纸</a> </dd> </dl> <div class="more" data-state="0"> 更多 </div> </div> // $(".more").click(function () { if ( $(this).attr("data-state") == 0) { //判断自定义属性的值 $(this).parent().css({ "height": "auto" }); $(this).attr("data-state","1") //修改 } else if ($(this).attr("data-state") == 1) { $(this).parent().css({ "height": "45px" }); $(this).attr("data-state", "0") } })
data-XXXX 直接在HTML标签中加入这个属性然后给值,
通过JQ的atrt去判断