什么是html5纯CSS的三级联动级联菜单

2023-03-04 22:24:02html-css013

什么是html5纯CSS的三级联动级联菜单,第1张

给你一个JQ的三级联动：

<!doctype html>

<html>

<head>

</head>

<style>

</style>

<body>

<option value="">请选择省份</option>

</select>

<option value="">请选择城市</option>

</select>

<option value="">请选择区域</option>

</select>

1.搭建框架

2.给省份和城市绑定change事件

$(function(){

var province = [

{"name" : "广东省" ,

"city" : [

{

"name" : "广州市" ,

"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]

{

"name" : "深圳市" ,

"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]

}

]

{"name" : "浙江省" ,

"city" : [

{

"name" : "杭州市" ,

"area" : ["上城区","下城区","江干区","西湖区"]

{

"name" : "丽水" ,

"area" : ["莲都区","松阳县","遂昌县","云和县"]

}

]

{"name" : "江西省" ,

"city" : [

{

"name" : "南昌市" ,

"area" : ["东湖区","西湖区","青云谱区","湾里区"]

{

"name" : "九江市" ,

"area" : ["浔阳区","庐山区","瑞昌市","九江县"]

{

"name" : "赣州市" ,

"area" : ["章贡区","南康区","上犹县","赣县"]

}

]

// 二级联动

$("#two").change(function(){

var one_index = $("#one option:selected").index()

var two_index = $("#two option:selected").index()

var three = $("#three")

three.empty().append("<option>请选择区域</option>")

if(two_index > 0){

var area = province[one_index-1].city[two_index-1].area

for(var i = 0 i < area.length i++){

three.append("<option>"+area[i]+"</option>")

}

})

// 一级联动

$("#one").change(function(){

var one_index = $("#one option:selected").index()

var two = $("#two")

console.log(one_index)

two.empty().append("<option>请选择城市</option>")

$("#three").empty().append("<option>请选择区域</option>")//清除

if(one_index > 0){

var city = province[one_index-1].city

console.log(province[one_index-1].city)

for(var i = 0 i < city.length i++){

two.append("<option>"+city[i].name+"</option>")

}

})

init()

function init(){

for(var i = 0 i < province.length i++){

$("#one").append("<option>"+province[i].name+"</option>")

}

})

</script>

</body>

</html>

对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过XML来实现级联菜单的功能。

首先要定义一个XML文件，用以存放级联菜单的信息，我们命名为query.xml，其代码如下：

<?xml version="1.0" encoding="gb2312"?>

<info>

</course>

</course>

</course>

<text>计算机组成原理</text>

</course>

</teacher>

</teacher>

</teacher>

</teacher>

<class>

</class>

<class>

</class>

<class>

</class>

<class>

</class>

</info>

然后再创建一个HTML文件，命名为query.html

在query.html里，首先创建一个表单

<option value="default">default</option>

</select>

<option value="default">default</option>

</select>

</form>

从上面的代码可以看出，当我们选择第一级菜单时，会触发showDetail方法，这是通过JavaScript来实现的，因此我们还需要定义一个showDetail方法，其实现代码如下：

function showDetail(){

var document_xml = new ActiveXObject("Microsoft.XMLDOM")

document_xml.load("query.xml")//加载info.xml

var RootNode = document_xml.documentElement//获得info.xml文档的根节点

var keyword = document.getElementByIdx("keyword").value

var details//用以存放二级菜单内容，是一个数组对象

var content = document.getElementByIdx("content")

content.options.length = 0//先清空

if(keyword=="default"){

var option = new Option("default","default")

content.add(option)

}else{

if(keyword=="1"){

details = document_xml.getElementsByTagName_r("course")

}else if(keyword=="2"){

details = document_xml.getElementsByTagName_r("teacher")

}else if(keyword=="3"){

details = document_xml.getElementsByTagName_r("class")

}

for(var i=0i<details.lengthi++){

var xText = details[i].childNodes[0].firstChild.nodeValue//获取文本

var xValue = details[i].childNodes[1].firstChild.nodeValue//获取文本以应的值

var option = new Option(xText,xValue)

content.add(option)

}

从上面的代码可以看出，showDetail方法会根据一级菜单选项的不同显示对应的子菜单。这里涉及到通过JavaScript来读取xml文件的操作，可以参见源码的注释部分，记得结合xml文件里的内容一起看哦。

二级菜单显示出来之后，我们就可以进行选择了，选择之后，会调用showValue方法，把选到的子菜单项的value和text显示出来。showValue的定义如下：

function showValue(){

var content= document.getElementByIdx("content")

var contentText = content.options[content.selectedIndex].text//获取text值

var contentValue = document.getElementByIdx("content").value//获取文本

alert(contentValue+" "+contentText)

}

在这个方法里，要注意option当中text值的获取，它与select表单域的value的获取方式不大一样，详见代码及其注释。

把两个方法封装在<head></head>之间，记得要写上<script language="javascript">和</script>了，然后你直接打开query.xml就可以看到效果了。

不知是否对楼主有用，希望对楼主有所帮助。

方法1：用Css实现

<html>

<head>

<title>css菜单显示效果</title>

/**

*菜单的构造,需要绑定到onload

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav")

for (i=0i<navRoot.childNodes.lengthi++) {

node = navRoot.childNodes[i]

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over"

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "")

}

window.onload=startList

</script>

/**

子乌的叶子css：主样式表

这个样式表的结构参考了<a href="http://www.zeldman.com">zeldman</a>的样式表结构

update:05.11.18

author:sheneyan

html {min-width: 742px}

/*css基本规则*/

img{border:0}

p.access {display:none}

div#counters{display:none}/*计数器暂时不显示*/

a{text-decoration: none}

/* 主要布局 */

body{

overflow:auto

text-align: center

margin: 0 auto

padding: 0

border: 0

background: #fff

color: #000

font: small/18px "宋体", Verdana, Helvetica, sans-serif

}

/**菜单的控制，根据<a href="http://www.alistapart.com/d/horizdropdowns/horizontal2.htm">css 菜单</a>修改而来*/

ul#nav,ul#nav ul{

margin: 0 auto

text-align:left

padding: 0

list-style: none

background:#fff

z-index:99

}

ul#nav {

width:732px

display:block

height:24px

clear:both

}

ul#nav li {

position: relative

z-index:999

float:left

}

ul#nav ul li{

display:block

}

ul#nav ul {

width:100px

height:auto

position: absolute

text-align:left

left: 0px

display: none

border:solid 1px #697210

}

/*当鼠标在子菜单和父菜单上时，父菜单的样式*/

ul#nav li.over a,ul#nav li:hover a{

border-color:#E2144A

background: #fdd

font-weight:bold

color: #E2144A

}

/*将子菜单的样式清除*/

ul#nav li.over ul a,ul#nav li:hover ul a{

background:#fff

font-weight:normal

color:#777

}

/*子菜单的hover样式*/

ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover{

background:#fff

font-weight:normal

color: #E2144A

background: #fdd

border-color:#E2144A

font-weight:bold

}

/* Styles for Menu Items */

ul#nav a {

font-size:14px

line-height:17px

display: block

padding:0 0 0 10px

width:78px

color: #777

height:17px

background: #fff

border-left:solid 1px #fff

border-top:solid 1px #fff

border-right:solid 1px #fff

border-bottom:solid 5px #697210

}

ul#nav ul li{

width:100px

border:0

}

/* Fix IE. Hide from IE Mac \*/

* html ul#nav li { float: leftheight: 17px}

* html ul#nav li a { height: 17px}

/* End */

ul#nav ul a { padding: 2px 0px 2px 10pxborder:0width:90px} /* Sub Menu Styles */

ul#nav li:hover ul,ul#nav li.over ul { display: block} /* The magic */

</style>

<body>

测试css菜单显示效果<br/>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<li><a href='/g.php/fav.html'>网站收藏夹</a></li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href='/g.php/todo/39.html'>计划要做的事</a></li>

<li><a href='/g.php/tobuy/40.html'>计划要买的</a></li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</Html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：go语言中实现切片(slice)的三种方式

# 下一篇：关于python人脸识别的问题？

推荐阅读

热门文章

最新发布

标签列表

什么是html5纯CSS的三级联动级联菜单

给您推荐相同类型的内容：