django实现树形菜单

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><h1>树形菜单</h1><ul class="menu"><li><span onclick="change(0)">文学艺术</span><ul><li>html1</li><li>html1</li><li>html1</li><li>html1</li><li>html1</li></ul></li><li><span onclick="change(1)">贴图专区</span><ul class="none"><li>真我风采</li><li>个人写真</li><li>文艺风</li><li>可爱风</li><li>御姐范</li></ul></li><li><span onclick="change(2)">房产论坛</span><ul class="none"><li>javascript1</li><li>javascript1</li><li>javascript1</li><li>javascript1</li><li>javascript1</li></ul></li></ul><script src="js/index.js" type="text/javascript" charset="utf-8"></script></body>
</html>

css代码

body{font-family: "arial black";font-size: 16px;
}
body,div,ul,li{margin: 0;padding: 0;
}
ul{list-style: none;
}
.menu{border: 1px solid #ddd;width: 400px;margin: 0 auto;
}
.menu>li>span{color: red;font-size: 24px;padding-left: 16px;background:url(../images/folder.png) no-repeat left center;
}
.menu>li>ul{margin-left: 38px;list-style-image: url(../images/file.png);/* height: 0px;overflow: hidden; */
}
/* .none{display: none;
} */

js代码

var mytit=document.getElementsByTagName("span");
var mycon=document.querySelector(".menu").getElementsByTagName("ul")
for(var j=0;j>mytit.length;j++){mycon[j].style.display="none";
}
function change(n){for(var i=0;i<mytit.length;i++){if(i==n){if(mycon[i].style.display=="none"){mycon[i].style.display="block";mytit[i].style.background="url(images/open.png) no-repeat left center"}else{mycon[i].style.display="none";mytit[i].style.background="url(images/folder.png) no-repeat left center"}}}
}

图标需自行下载

最终效果图

django实现树形菜单相关推荐

python菜单设计_python django 数据库树形菜单的设计
# view文件 from django.shortcuts import render from app.models import Menu # Create your views here. f ...
ActionScript 3.0 实现树形菜单。
转自:http://www.cppblog.com/twzheng/archive/2007/10/19/34598.aspx 主要2个类:给了我不少启发.打算修改成xml,并加上拖动节点,添加删除节 ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
Unity 引擎UGUI之自定义树形菜单（TreeView）
先上几张效果图: 如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...
树形菜单 php,简单的树形菜单_php
table {font-size = 9pt} td {height = 10px} /** * 构造树,初值为0 */ function tree(n) { var id = new Array(& ...
ztree树形菜单demo
阅读目录 zTree树形菜单回到顶部 zTree树形菜单树形菜单使用方式如下: HTML引入的方式如下: <!DOCTYPE html><html><head> ...
dTree三级树形菜单
dTree三级树形菜单,老外的东西,不过修改挺方便面的,你甚至可以把它改为动态读取数据库的,演示图在上边,是不是你想要的? http://www.codefans.net/soft/3451.shtm ...
SpringMVC+ZTree实现树形菜单权限配置
计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...
Java GUI编程：swing JTree实现树形菜单代码示例
package com.zxl;import javax.swing.*; import javax.swing.tree.DefaultMutableTreeNode;/*** @Descripti ...
zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html><head><meta char ...

django实现树形菜单

django实现树形菜单相关推荐

最新文章

热门文章