jquery 树形框 横_jquery 横向折叠插件

jquery 横向折叠插件lateral-fold - 懒人建站http://51xuediannao.com/

body{background: #000;}

ul{margin-top:0; margin-bottom:0; padding-left:0;*margin-left:0;list-style-type: none;border: 5px solid #fff;}

a{ text-decoration: none; color: #333}

/*依赖的css 其中的 height: 300px; width: 40px; background 都是随手定义的，请自定义您的样式*/

.lateral-fold{height: 460px; overflow: hidden;}

.lateral-fold li,.lateral-fold-tab{width: 102px; height: 100%; float: left; }

.lateral-fold li{ overflow: hidden; transition: all 0.5s;}

.lateral-fold-tab{background: #fff;}

.lateral-fold-con{ overflow: hidden;width: 0;}

.active {

background: red;

width: 102px;

height: 460px;

}

/*自定义*/

#test1{width: 1200px; border:#ddd solid 1px; margin: 0 auto;}

#test1 ul{ height: 460px; }

#test1 ul li{width: 102px;}

#test1 .lateral-fold-tab{}

#test1 .lateral-fold-con{}

jquery 横向折叠插件lateral-fold

懒人建站http://51xuediannao.com/

• lateral-fold-con

• lateral-fold-con

• lateral-fold-con

• lateral-fold-con

• lateral-fold-con

//懒人建站http://51xuediannao.com/

$.extend($.fn,{

lateralFold:function(callback){

//event 事件 可以是 click 或者 mouseenter 注册在盒子的data-event="mouseenter" ，默认 click

return this.each(function(){

var $box = $(this),

$lis = $box.children("li"),

boxWidth = $box.width(),

tabWidth = $box.find(".lateral-fold-tab").eq(0).width();

var event = $box.data("event")||"click";

var liWidth = boxWidth - tabWidth * ($lis.length-1);

$box.on(event,".lateral-fold-tab",function(){

var $this = $(this),$p = $this.closest("li");

if($p.hasClass("on")){

return

}

$p.addClass("on").css("width",liWidth).siblings("li").removeClass("on").css("width",102);

typeof callback=="function" && callback.call(this,$box);

});

//初始化

$box.children(".on").css("width",liWidth);

typeof callback=="function" && callback.call(this,$box);

});

}

});

//调用测试

$(".lateral-fold").lateralFold();

运 行