需要在页面左侧边栏菜单与以下要求

时间:2017-03-08 作者:pbrc1995

我用下面的代码在页面左侧创建菜单。

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应该是可见的,如果没有点击箭头,这些应该是不可见的。

谢谢,巴尔加夫。

1 个回复
SO网友:Cristian Mergea

使用为wordpress制作的教程链接此教程->http://mysitemyway.com/docs/Collapsible_sidebar_menus

并将jQuery用于动画

    jQuery(document).ready(function(){
     jQuery(\'.menu .dropdown a\').click(function(e){  
          e.preventDefault();
          if (jQuery(this).parent().children(\'.sub-menu:first\').is(\':visible\')) {
               jQuery(this).parent().children(\'.sub-menu:first\').hide();
          } else {
               jQuery(this).parent().children(\'.sub-menu:first\').show();
          }
     });
});