1

我的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 像素？

4

2 回答 2

1 
$(document).ready(function() {
    $('.menu li.shownav').click(function() {
        //will auto slide down content below it for it to fit
        $('#navigationBar').slideDown();
    });
});
于 2012-11-10T12:39:27.510 回答
1

你应该：

首先旨在使菜单仅在 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>

不依赖 javascript 的一级 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 后备菜单

于 2012-11-10T13:00:59.767 回答