编程 Javascript

基于jquery实现无限级树形菜单

Posted in Javascript onMarch 22, 2016

本文实例为大家分享了基于jquery实现无限级树形菜单效果，具有一定的参考价值，具体内容如下

效果图：

基于jquery实现无限级树形菜单

实现代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无限级树形菜单</title>
</head>
<script src="jquery.min.js"></script>
<style>
ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;}
ul.a li{list-style-type:none;cursor:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none}
.treelist{width:222px;}
ul.a div{height:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px}
.shows{display:block}
</style>
<body>
 
<div class="treelist">
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>
    <ul class="a">
    <div>ccccc</div>
      <li>xxxx</li>
      <li>xxxx</li>
      <li>
        <ul class="a">
        <div>ccccc</div>
          <li>
            <ul class="a">
              <div>ccccc</div>
              <li>xxxx</li>
              <li>xxxx</li>
              <li>xxxx</li>
              <li>xxxx</li>
            </ul>
          </li>
          <li>xxxx</li>
          <li>xxxx</li>
          <li>xxxx</li>
        </ul>
      </li>
      <li>xxxx</li>
    </ul>
  </li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
 
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
 
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
</div>
 
 
 
<script>
/*
$(".a div").each(function(i){
  var w=$(this).parents("li").width();
  $(this).css("width",w-100+"px");
})
*/
 
$(".a").click(function(){
  $(this).find("li").click(function(event){
    return false
  })
   
  if($(this).hasClass("shows")){
    $(this).removeClass("shows");
    $(this).find("li").find("ul").removeClass("shows");
    $(this).find("li").hide();
    $(this).find("div").css("background","url(jia.jpg) no-repeat");
     
     
  }else{
    $(this).addClass("shows");
    $(this).find("li").show();
    $(this).find("li").find("ul").find("li").hide();
    $(this).show();
    $(this).find("div").eq(0).css("background","url(jian.jpg) no-repeat"); 
  }
   
})
</script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

基于jquery实现无限级树形菜单

- Author -

netshow-vip

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery的一个扩展form序列化到json对象

Dec 09 Javascript

Javascript中找到子元素在父元素内相对位置的代码

Jul 21 Javascript

基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

May 07 Javascript

javascript面向对象特性代码实例

Jun 12 Javascript

javascript框架设计读书笔记之字符串的扩展和修复

Dec 02 Javascript

JavaScript时间操作之年月日星期级联操作

Jan 15 Javascript

js中常用的Tab切换效果(推荐)

Aug 30 Javascript

Node.js实现兼容IE789的文件上传进度条

Sep 02 Javascript

jQuery除指定区域外点击任何地方隐藏DIV功能

Nov 13 jQuery

vue+vuex+axios实现登录、注册页权限拦截

Mar 09 Javascript

vue实现将一个数组内的相同数据进行合并

Nov 07 Javascript

Vue实现导入Excel功能步骤详解

Jul 03 Vue.js

javascript的几种继承方法介绍

Mar 22 #Javascript

基于javascript实现文字无缝滚动效果

Mar 22 #Javascript

ajax在兼容模式下失效的快速解决方法

Mar 22 #Javascript

jquery仿QQ登录账号选择下拉框效果

Mar 22 #Javascript

详述JavaScript实现继承的几种方式(推荐)

Mar 22 #Javascript

jQuery toggle 代替方法

Mar 22 #Javascript

一款简单的jQuery图片标注效果附源码下载

Mar 22 #Javascript