jqueryjs下拉代码（jquery下拉框代码）
更新：2022-11-11 07:14
本文目录一览：
求用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">
<option>111</option>
<option>111</option>
</select>
<a href="javascript:void(0)" onclick="ccc()">click me</a>
<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>
</body>
</html>
自己吧jquery库搞进去大概就可以了
求用JS或JQUERY 打开select的下拉列表
知道想要种效
<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">
<h1><span>∨</span>仿Select下拉菜单</h1>
<li><a href="#">下拉列表1</a></li>
<li><a href="#">下拉列表2</a></li>
<li><a href="#">下拉列表3</a></li>
<li><a href="#">下拉列表4</a></li>
<li><a href="#">下拉列表5</a></li>
<li><a href="#">下拉列表6</a></li>
</ul>
js函数怎么写：下拉菜单下拉菜单0_0
下拉菜单关键在于HTML的布局和CSS的样式写法。这有这两个写好了后，js操作起来才非常的简单。下面是简单例子，仅供参考：
<html xmlns="" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js菜单演示_怎么使用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; i<oLi.length; i++) {
oLi[i].onmouseover=function() {
this.className+=(this.className.length>0? " ":"") + "onhover";
};
oLi[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ":"") + "onhover";
}
oLi[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ":"") + "onhover";
};
oLi[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( |^)onhover\\b"),"");
}
}
}
window.onload=menu;
</script>
</head>
<body>
<ul id="nav">
<li><a href="" target="_blank">动漫之家</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
<li><a href="" target="_blank">js详解</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
<li><a href="" target="_blank">js运用</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
<li><a href="" target="_blank">关于我们</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
<li><a href="" target="_blank">js在线演示</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
<li><a href="" target="_blank">联系我们</a>
<ul>
<li><a href="" target="_blank">下拉一</a></li>
<li><a href="" target="_blank">下拉二</a></li>
<li><a href="" target="_blank">下拉三</a></li>
<li><a href="" target="_blank">下拉四</a></li>
</ul>
</li>
</ul>
</body>
</html>
