<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
.level1 ul{
display:
none;
}
.current{
color:
red;
}
<
/
style
>
</
head
>
<
body
>
<
div
>
<
ul
class=
"menu"
>
<
li
class=
"level1"
>
<
a
href=
"#none"
>衬衫
</
a
>
<
ul
>
<
li
>
<
a
href=
"#"
>短袖衬衫
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>长袖衬衫
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>长袖T恤
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>短袖T恤
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
class=
"level1"
>
<
a
href=
"#none"
>卫衣
</
a
>
<
ul
>
<
li
>
<
a
href=
"#"
>开襟卫衣
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>套头卫衣
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>运动卫衣
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>童装卫衣
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
class=
"level1"
>
<
a
href=
"#none"
>裤子
</
a
>
<
ul
>
<
li
>
<
a
href=
"#"
>短裤
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>休闲裤
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>牛仔裤
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>卡其裤
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
script
src=
"public/jquery.js"
>
<
/
script
>
<
script
>
$(
'.level1>a').
click(
function () {
$(
this).
addClass(
'current')
.
next().
show()
.
parent().
siblings().
children(
'a').
removeClass(
'current')
.
next().
hide();
return
false;
})
<
/
script
>
</
body
>
</
html
>