当前位置:首页 >> JavaScript>>正文

Jquery简单几行代码实现多层菜单下拉特效

栏目:JavaScript时间:2017-12-13热度:

今天找到了一个简单几句Jquery代码实现多层菜单下拉特效的方法:


Jquery简单几行代码实现多层菜单下拉特效


知识点:

.hover()

.mouseover()

.mouseleave()

.children()

.css()

.slideDown()/.slideUp()


样式:


<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul{ list-style: none; }
.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
.nav li { float: left; position:relative; height:30px; width:120px }
.nav li a {display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.nav li a:hover{ background:#F60}
.nav li ul {position:absolute;width:120px;display:none;}
.nav li ul li{ float: left; position:relative; height:30px; width:120px }
.nav li ul li ul {position:absolute;width:120px;display:none;top:0;left:120px;}
.nav li ul li ul li a{display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.nav li ul li ul li a:hover{background:#F60}
</style>


网页元素:


<ul class="nav">
    <li><a href="#">一级菜单</a>
    <ul>
        <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a>
    <ul>
        <li><a href="#">二级菜单</a></li>
            <li><a href="#">2级菜单</a>
 <ul>
    <li><a href="#">三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
                </ul>
</li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
</ul>


js代码:


$(document).ready(function(){
var nav=$('.nav li');
nav.mouseover(function(){
if($(this).children('ul').css('display')=='none'){
$(this).children('ul').stop().slideDown(200);
}
});
nav.mouseleave(function(){
if($(this).children('ul').css('display')=='block'){
$(this).children('ul').stop().slideUp(200);
}
})
})


另外也能用.hover()实现:


$(document).ready(function(){
var nav=$('.nav li');
nav.hover(
function(){
if($(this).children('ul').css('display')=='none'){
$(this).children('ul').stop().slideDown(200)}},
function(){
if($(this).children('ul').css('display')=='block'){
$(this).children('ul').stop().slideUp(200)
}}
)
})


效果演示


相关文章

热门标签