js多级下拉菜单代码（js下拉菜单怎么做）

admin 发布：2022-12-19 19:45 115

本篇文章给大家谈谈js多级下拉菜单代码，以及js下拉菜单怎么做对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、谁内给我讲一将如下下拉菜单的js代码
2、数据库+javascript+html如何实现多级select下拉菜单
3、怎么用JS写个下拉菜单
4、js函数怎么写：下拉菜单下拉菜单0_0
5、一段js下拉菜单代码，我想二级菜单在上面向上弹出。请问怎么修改
6、js点击下拉菜单相应显示

谁内给我讲一将如下下拉菜单的js代码

第一， visibility：heddin；是让子菜单初始化时隐藏。这样下面的showmenu函数显示时才有从无到有的效果。

第二 showmenu 是函数名字，可以自己命名，规则和变量名规则一样

第三触发这个函数时把子菜单的显示属性设置为显示如果是hidden 则隐藏。menu是子菜单对象 style是子菜单的样式对象，也可以说是样式属性 visibility是设置网页元素显示与否的样式属性这里可以改成menu.style.display="";

第四 document.onclick = hidmenu；是给网页单击事件指定处理函数

这是例子，如果是放到实际网页里就不能这么写了

最好是给每个a标签指定 onclick事件

像下边一样 a href="javascript:showmenu()"下拉菜单/a

js多级下拉菜单代码（js下拉菜单怎么做）

数据库+javascript+html如何实现多级select下拉菜单

这个，其实比较简单

数据上来说，相当于是一个多维数组

比如，系：

计算机，中文，英语

然后是专业：

计算机 - 软件工程，xxx专业 ...

中文 - 汉语言文学，xxx专业 ...

数据库在设计上，你可以将他们都放在一个表里面，可以有这些列

id 唯一id

name 名称，可以是专业名称，也可以是系名称

parent 指定如果是专业，是数据那个系，这里可以存成系的id，

如果是系，那么这里直接填0，表示就可以

这样的话，一个demo数据

id name parent

1 计算机系 0

2 软件工程 1

这样，上边，后台的数据就这个节奏就可以满足，如果专业还有细分，那这个结构也可以满足

前台显示的时候，这里分成俩个select来显示就可以

第一个select用来显示系，查询parent为0的数据，显示到select里面就可以

第二个select用来显示系的专业，查询的时候，将第一个select的系id拿到，直接数据库里面查询parent为第一个select选择系的id的数据

demo

选择系：

select id="department" onchange="change(this)"/select

选择专业：

select id="professional"/select

//用js读取数据，然后生成代码

//根据parentid，读取数据，然后返回

function getData(parentId , callback){

$.ajax({

url : 'test.do',//后台数据地址

data : {parentId : parentId},//请求parentid的数据

success : function(result){

alert(result);

callback(result);

}

})

}

function renderOptions(arr , el){//生成select 的 option

el.empty();

$.each(data , function(index , item){

$('option/').attr({

value : item.id

}).html(item.name).appendTo(el);

})

}

var department = $('#department');//系的select

getData(0 , function(data){//请求系的数据

department.empty();

renderOptions(data , department);//这里生成系的select

});

var professional = $('#professional');//专业的select

function change(el){//当系变化的时候

var parentId = $(el).val();//这里得到选择的系的id

getData(parentId , function(data){

professional.empty();

renderOptions(data , professional );//这里生成专业的select

});

}

就是这样的原理

后台还需要一个查询，就是根据parentid查询数据，就可以了

怎么用JS写个下拉菜单

其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none;当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；

js函数怎么写：下拉菜单下拉菜单0_0

下拉菜单关键在于HTML的布局和CSS的样式写法。这有这两个写好了后，js操作起来才非常的简单。下面是简单例子，仅供参考：

html xmlns="" lang="zh-CN"

headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titlejs菜单演示_怎么使用js_js下拉菜单_简单js下拉菜单_怎么做js下拉菜单/title

style type="text/css"

*{margin:0;padding:0;border:0;}

body {font-family: arial, 宋体, serif;font-size:12px;}

#nav {line-height: 24px; list-style-type: none; background:#666;}

#nav a {display: block; width: 80px; text-align:center;}

#nav a:link {color:#666; text-decoration:none;}

#nav a:visited {color:#666;text-decoration:none;}

#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}

#nav li {float: left; width: 80px; background:#CCC;}

#nav li a:hover{background:#999;}

#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}

#nav li ul li{float: left; width: 120px;background: #F6F6F6;}

#nav li ul a{display: block; width: 100px;text-align:left;padding-left:20px;}

#nav li ul a:link {color:#666; text-decoration:none;}

#nav li ul a:visited {color:#666;text-decoration:none;}

#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}

#nav li:hover ul {left: auto;}

#nav li.onhover ul {left: auto;}

#content {clear: left;}

/style

script type="text/javascript"

function menu() {

var oLi = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; ioLi.length; i++) {

oLi[i].onmouseover=function() {

this.className+=(this.className.length0? " ": "") + "onhover";

};

oLi[i].onMouseDown=function() {

this.className+=(this.className.length0? " ": "") + "onhover";

}

oLi[i].onMouseUp=function() {

this.className+=(this.className.length0? " ": "") + "onhover";

};

oLi[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)onhover\b"),"" );}}}

window.onload=menu;

/script/head

body

ul id="nav"

lia href="" target="_blank" 动漫之家/a

ul

li

a href="" target="_blank" 下拉一/a/li

lia href="" target="_blank" 下拉二/a/li