我用下面的代码在页面左侧创建菜单。
HTML:
<div class="left" id="nav">
<ul>
<li id="light">
Video
<ul>
<li>Video 1</li>
<li>Video 2</li>
<li>Video 3</li>
<li> Video 4</li>
</ul>
</li>
<li id="photo">
Photograms
<ul>
<li>Photograms 1</li>
<li>Photograms 2</li>
<li>Photograms 3</li>
</ul>
</li>
<li id="about">
About
<ul>
<li>About 1</li>
<li>About 2</li>
<li>About 3</li>
<li>About 4</li>
<li>About 5</li>
</ul>
</li></ul>
</div>
CSS:
#nav ul ul{
display: none;
margin-left: 25px;
}
Javascript:
$(\'#nav ul li\')
.css({cursor: "pointer"})
.on(\'click\', function(){
$(this).find(\'ul\').toggle();
})
对于这段代码,我得到的是这样的。。
Menu Image但我想用箭头标记视频、照片和点击箭头,点击箭头,箭头video1、video2、video3、video4应该是可见的,如果没有点击箭头,这些应该是不可见的。
谢谢,巴尔加夫。