首页
IT
登录
6mi
u
盘
搜
搜 索
IT
HTML+CSS+JavaScript实现简易下拉菜单
HTML+CSS+JavaScript实现简易下拉菜单
xiaoxiao
2022-06-30
50
<!DOCTYPE html> <
html
lang=
"en"
> <
head
> <
meta
charset=
"UTF-8"
> <
title
>下拉列表</
title
> <
link
rel=
"stylesheet"
href=
"css/reset.css"
type=
"text/css"
> <
style
type=
"text/css"
>
*
{ padding:
0
; margin:
0
; }
body
{ background:
#333
; font:
16
px
/
32
px "微软雅黑"
; }
#box
{ width:
500
px
; height:
326
px
; border:
3
px solid
#000
; background:
#ffffff
;
/*margin: 40px auto;*/
/*本身是一个层*/
position:
absolute
; left:
50
%; top:
50
%; margin: -
163
px
0 0
-
250
px
; } .
province
{ width:
320
px
; height:
42
px
; background:
#c00
; margin:
80
px auto
; position:
relative
; } .
province strong
{ width:
64
px
; height:
42
px
; line-height:
42
px
; display:
block
; float:
left
; color:
#ffffff
; padding-left:
10
px
; }
#selectProvince
{ display:
block
; float:
left
; width:
200
px
; height:
28
px
; background:
#ffffff url
(
"image/province_sprites.png"
)
no-repeat
190
px
1
px
; margin-top:
7
px
; padding-left:
8
px
; color:
#ccc
; cursor:
pointer
; }
#allProvince
{ width:
318
px
; height:
auto
; line-height:
30
px
; clear:
both
; position:
absolute
; top:
42
px
; left:
0
; background:
#ffffff
; border:
1
px solid
#dfdfdf
; display:
none
; z-index:
101
; }
#allProvince li
{ height:
30
px
; border-bottom:
1
px solid
#dfdfdf
; }
#allProvince li b
{ font-weight:
bold
; width:
40
px
;
/**/
display:
inline-block
; text-align:
center
; }
#allProvince li span
{ padding-right:
15
px
; cursor:
pointer
; }
#allProvince li span
:
hover
{ color:
#c00
; }
#layer
{ width:
100
%; height:
100
%; background:
#fff
; position:
absolute
; top:
0
; left:
0
; z-index:
100
; filter:
alpha
(
opacity
=
0
); opacity:
0
; display:
none
; } .
show
{ color:
#cccccc
; background-position:
190
px
-
17
px
; } .
hide
{ color:
#000
; background-position:
190
px
1
px
; } </
style
> </
head
> <
body
> <
div
id=
"box"
> <
div
class=
"province"
> <
strong
>送货至:</
strong
> <
span
id=
"selectProvince"
>北京</
span
> <
ul
id=
"allProvince"
> <
li
><
b
>A</
b
><
span
>安徽</
span
><
span
>安阳</
span
></
li
> <
li
><
b
>B</
b
><
span
>北京</
span
></
li
> <
li
><
b
>C</
b
><
span
>重庆</
span
></
li
> <
li
><
b
>D</
b
><
span
>东北</
span
></
li
> <
li
><
b
>F</
b
><
span
>福建</
span
></
li
> <
li
><
b
>N</
b
><
span
>南京</
span
></
li
> <
li
><
b
>G</
b
><
span
>广东</
span
><
span
>广西</
span
></
li
> <
li
><
b
>T</
b
><
span
>天津</
span
></
li
> <
li
><
b
>H</
b
><
span
>湖南</
span
><
span
>河南</
span
><
span
>黑龙江</
span
></
li
> <
li
><
b
>Z</
b
><
span
>郑州</
span
></
li
> <
li
><
b
>S</
b
><
span
>上海</
span
><
span
>山东</
span
></
li
> </
ul
> </
div
> </
div
> <
div
id=
"layer"
> </
div
> <
script
type=
"text/javascript"
>
function
addLoadEvent
(func) {
var
oldonload
=
window
.
onload
;
if
(
typeof
window
.
onload
!=
'function'
) {
window
.
onload
= func; }
else
{
window
.
onload
=
function
() {
oldonload
(); func(); } } }
function
getDOM
(id) {
return
document
.
getElementById
(id); }
function
showProvince
() {
getDOM
(
"selectProvince"
).
onclick
=
showAllProvince
;
getDOM
(
"layer"
).
onclick
=
function
() {
hideAllProvince
();
}
; }
function
showAllProvince
() {
getDOM
(
"allProvince"
).
style
.
display
=
"block"
;
getDOM
(
"layer"
).
style
.
display
=
"block"
;
getDOM
(
"selectProvince"
).
className
=
"show"
;
setectProvice
(); }
function
hideAllProvince
() {
getDOM
(
"allProvince"
).
style
.
display
=
"none"
;
getDOM
(
"layer"
).
style
.
display
=
"none"
;
getDOM
(
"selectProvince"
).
className
=
"hide"
; }
function
setectProvice
() {
var
pro
=
getDOM
(
"allProvince"
).
getElementsByTagName
(
"li"
);
var
links
;
for
(
var
i
=
0
;
i
<
pro
.
length
;
i
++){
links
=
pro
[
i
].
getElementsByTagName
(
"span"
);
for
(
var
j
=
0
;
j
<
links
.
length
;
j
++){
links
[
j
].
onclick
=
function
() {
getDOM
(
"selectProvince"
).
innerHTML
=
this
.
innerHTML
;
hideAllProvince
(); } } } }
addLoadEvent
(
showProvince
); </
script
> </
body
> </
html
>
转载请注明原文地址: https://ju.6miu.com/read-1125726.html
专利
最新回复
(
0
)
