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：hover

.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>

Non javascript reliant one level 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();
    });
});

Finished jquery+css fallback menu with click

jquery - onclick内容向下滑动

2 个答案: