OnClick内容滑下

Question

我的javascript有问题（我处于一个真正的初学者状态，很抱歉）

）

我有这样的菜单：

<ul class="menu">
   <li><a href="#">Home</a></li>    
   <li class="shownav"><a href="#">Services</a></li>    
   <li><a href="#">Projects</a></li>    
</ul>

我的内容与此相似：

<div id="contentwrapper">
     <div id="content">
          <!--Content here-->
     </div>
</div>

我要实现的是，当您单击li.shownav时，#ContentWrapper将向下滑动30像素并揭示第二个导航栏

有什么方法可以触发DIV下降30像素？

Answer 1

$(document).ready(function() {
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('#navigationBar').slideDown();
    });
});

Answer 2

您应该：

首先要使菜单仅在CSS中工作（否则非JS浏览器将根本无法导航）

这是一个简单的CSS水平菜单，具有一个子菜单下拉级

CSS使用：悬停

.menu>li{float:left;display:block;padding:10px;position:relative;}
.menu>li.nav>ul,.menu>li.shownav>ul{display:none;position:absolute;top:2em}
.menu>li.nav:hover>ul{display:block;}

html（作者稍作修改：

<ul class="menu">    
  <li><a href="#">Home</a></li>        
    <li class="nav"><a href="#">Services</a>
    <ul>
        <li><a href="#">Submenu</a></li>
    </ul>
  </li>        
  <li><a href="#">Projects</a></li>     
</ul>

非JavaScript Reliant一个级别CSSMENU

，然后开始添加JS（jQuery或其他）。这是以上的简单版本，包括slidetoggle动画onclick

.js

$(document).ready(function() {
    $('li.nav').attr('class', 'shownav');//this removes the css class that is targetted by the rules so .js will now take over
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('ul', this).slideToggle();
    });
});

完成的jQuery CSS回退菜单，单击