zoukankan      html  css  js  c++  java
  • 通过判断自定义属性的值给出不同的样式

    点击更多, 展开缩小 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去判断
    
    
  • 相关阅读:
    RabbitMq环境搭建
    Springboot集成quartz
    java8时间工具类
    AngularJS学习笔记之directive——scope选项与绑定策略
    理解$watch ,$apply 和 $digest --- 理解数据绑定过程
    AngularJS中service,factory,provider的区别
    AngularJS的Filter用法详解
    Angular.js中使用$watch监听模型变化
    history
    data-*
  • 原文地址:https://www.cnblogs.com/C-dashazi/p/6906687.html
Copyright © 2011-2022 走看看