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

本文目錄一覽：

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庫搞進去大概就可以了

求用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