jqueryjs下拉代码（jquery下拉框代码）

更新：2022-11-11 07:14

本文目录一览：

1、求用js代码写出点击出现下拉菜单,再次点击菜单消失
2、求用JS或JQUERY 打开select的下拉列表
3、js函数怎么写：下拉菜单下拉菜单0_0

求用js代码写出点击出现下拉菜单,再次点击菜单消失

html

head

script type="text/javascript" src="jquery.js"/script

/head

body

input type="hidden" id="aaa" value="1"/

select id="select" style="display:none"

option111/option

/select

a href="javascript:void(0)" onclick="ccc()"click me/a

/body

script

function ccc(){

var a=$("#aaa").val();

if(parseInt(a)%2 ==0){

alert(1)

$("#select").hide();

}else{

alert(2)

$("#select").show();

}

$("#aaa").attr("value", parseInt(a)+1);

}

/script

/html

自己吧jquery库搞进去大概就可以了

jqueryjs下拉代码（jquery下拉框代码）

求用JS或JQUERY 打开select的下拉列表

知道想要种效

Jquery写

style

*{margin:0;padding:0;}

#select{margin:20px auto;width:200px;border:1px solid #ccc;}

#select h1{padding:1px 1px 1px 5px;height:20px;font:12px/20px '宋体';color:#666;cursor:pointer;font-weight:bold;}

#select h1 span{float:right;display:block;width:20px;height:20px;font:inherit;color:#fff;background:#ccc;text-align:center;font-weight:inherit;}

#select li{list-style:none;display:none;}

#select li a{display:block;padding:0 5px;height:20px;font:12px/20px '宋体';color:#666;text-decoration:none;}

#select li a:hover{background:#f5f5f5;color:#f60;}

/style

script type="text/javascript"

$(function(){

$('#select').hover(

function(){$('#select li').show();$('#select h1').css('border-bottom','1px solid #ccc');},

function(){$('#select li').hide();$('#select h1').css('border-bottom','none');})

})

/script

ul id="select"

h1span∨/span仿Select拉菜单/h1

lia href="#"拉列表1/a/li

lia href="#"拉列表2/a/li

lia href="#"拉列表3/a/li

lia href="#"拉列表4/a/li

lia href="#"拉列表5/a/li

lia href="#"拉列表6/a/li

/ul

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

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

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