jQuery折叠版实现

折叠版样式

点击触发操作，显示面板
css

.active{
        display:none;
    }

html 传入“this”

<ul>
  <li  class="li_stl">
    <span onclick="OF(this)">
        <img src="/Content/images/MCL_li.png" />
    </span>
    <div  class="active"></div>
  </li>
  <li  class="li_stl"></li>
</ul>

js
.children("")只会遍历一级

 // 遍历li赋值id，根据class
    var a = document.querySelectorAll('.li_stl');
    for (var i in a) {
        a[i].id = 'li_list' + i;
    }
  //  触发方法
  function OF(e) {
        //获取id；定位到div
        var li_st = $(e).parent().attr("id");
        var cls_fid = document.getElementById(li_st);
        //内嵌div块
        //$(li_st).find("div").first().addClass("active");   $("#" + li_st).children("div").attr("class");
        // clsName = $(li_st).find("div").first().attr("class");  
        //注意加“#”   定位到该id下的第一个div
        var clsName = $("#" + li_st).children("div").attr("class"); 
        //判断是否展开
        if (clsName == "active") {
            $("#" + li_st).children("div").removeClass("active");
            //div.style.display = "";
            // 改变所在div的高度，拉长高度   可改成auto，实现高度自适应
            cls_fid.style.height = "590px";
        } else {
            $("#" + li_st).children("div").addClass("active");
            cls_fid.style.height = "";
        }
    }