通过判断自定义属性的值给出不同的样式

点击更多, 展开缩小 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去判断

 

posted on 2017-05-26 01:26  水好凉  阅读(1482)  评论(0编辑  收藏  举报

导航