纯html左侧多级树形管理系统,CSS jquery多级竖向展开树形TRee菜单

jQuery多级层叠树形菜单效果

.topnav {

width: 213px;

padding: 40px 28px 25px 0;

font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;

}

ul.topnav {

padding: 0;

margin: 0;

font-size: 1em;

line-height: 0.5em;

list-style: none;

}

ul.topnav li {}

ul.topnav li a {

line-height: 10px;

font-size: 11px;

padding: 10px 5px;

color: #000;

display: block;

text-decoration: none;

font-weight: bolder;

}

ul.topnav li a:hover {

background-color:#675C7C;

color:white;

}

ul.topnav ul {

margin: 0;

padding: 0;

display: none;

}

ul.topnav ul li {

margin: 0;

padding: 0;

clear: both;

}

ul.topnav ul li a {

padding-left: 20px;

font-size: 10px;

font-weight: normal;

outline:0;

}

ul.topnav ul li a:hover {

background-color:#D3C99C;

color:#675C7C;

}

ul.topnav ul ul li a {

color:silver;

padding-left: 40px;

}

ul.topnav ul ul li a:hover {

background-color:#D3CEB8;

color:#675C7C;

}

ul.topnav span{

float:right;

}

(function($){

$.fn.extend({

accordion: function(options) {

var defaults = {

accordion: 'true',

speed: 300,

closedSign: '[+]',

openedSign: '[-]'

};

var opts = $.extend(defaults, options);

var $this = $(this);

$this.find("li").each(function() {

if($(this).find("ul").size() != 0){

$(this).find("a:first").append(""+ opts.closedSign +"");

if($(this).find("a:first").attr('href') == "#"){

$(this).find("a:first").click(function(){return false;});

}

}

});

$this.find("li.active").each(function() {

$(this).parents("ul").slideDown(opts.speed);

$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);

});

$this.find("li a").click(function() {

if($(this).parent().find("ul").size() != 0){

if(opts.accordion){

if(!$(this).parent().find("ul").is(':visible')){

parents = $(this).parent().parents("ul");

visible = $this.find("ul:visible");

visible.each(function(visibleIndex){

var close = true;

parents.each(function(parentIndex){

if(parents[parentIndex] == visible[visibleIndex]){

close = false;

return false;

}

});

if(close){

if($(this).parent().find("ul") != visible[visibleIndex]){

$(visible[visibleIndex]).slideUp(opts.speed, function(){

$(this).parent("li").find("span:first").html(opts.closedSign);

});

}

}

});

}

}

if($(this).parent().find("ul:first").is(":visible")){

$(this).parent().find("ul:first").slideUp(opts.speed, function(){

$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);

});

}else{

$(this).parent().find("ul:first").slideDown(opts.speed, function(){

$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);

});

}

}

});

}

});

})(jQuery);

$(document).ready(function() {

$(".topnav").accordion({

accordion:false,

speed: 500,

closedSign: '[+]',

openedSign: '[-]'

});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值