jquery下拉菜单[复合事件hover制作]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <title></title>
    <style type="text/css">
        .div1 {
            position: relative;
            width: 100px;
            height: 50px;
            background-color: red;
            float: left;
            margin-left: 20px;
        }

        .div2 {
            position: absolute;
            width: 100%;
            height: 0px;
            top: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>

    <div class="div1">
        <div class="div2"></div>
    </div>

    <div class="div1">
        <div class="div2"></div>
    </div>

    <div class="div1">
        <div class="div2"></div>
    </div>

    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(".div1").hover(
        function () {
            var aaa = $(this).children(".div2:eq(0)");
            aaa.stop().animate({ height: "300px" }, 500)
        },
        function () {
            var aaa = $(this).children(".div2:eq(0)");
            aaa.stop().animate({ height: "0px" }, 500)
        }
        );
</script>

时间： 2024-11-08 15:25:05

jquery下拉菜单[复合事件hover制作]的相关文章

可控制导航下拉方向的jQuery下拉菜单代码

效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base ta

jQuery下拉菜单

下拉菜单如果采用原生javascript制作代码比较多,但是使用jquery就大大提高了开发效率,几行代码就搞定 <div id="wrap"> <ul id="menu"> <li><a href="#">Study</a> <ul class="submenu"> <li><a href="#">JavaSc

HTML导航之下拉菜单方法3——JQuery下拉菜单

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JQuery</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown

直接将下面代码Copy过去就行: <script type="text/javascript"> $('ul.nav li.dropdown').hover(function () { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function () { $(this).find('.dropdown-menu').stop(true, true).delay(200

jQuery --下拉菜单的显示与隐藏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 #nav{ 13 background-color: #EEE; 14 width

jQuery下拉菜单插件Tendina

插件效果: 下载地址和文档: https://github.com/iprignano/tendina

分别用CSS\JavaScript\jQuery实现动态下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery宽屏下拉菜单导航子菜单可自定义

jQuery是一款流行已久的Javascript框架,确实很好用.今天我们要介绍一款用jQuery实现的下拉菜单导航插件,下拉菜单的外观是仿腾讯云官网菜单的.鼠标滑过主菜单时,即可展开二级下拉子菜单.值得注意的是,这款jQuery下拉菜单的子菜单内容可以自定义,因此也非常灵活. 访问地址:http://www.xuecss3.com/jquery-10-757-1.html 另外分享一个FQ软件:下载地址 http://www.xuecss3.com/qianduan-9-374-1.html

兼容ie7的导航下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ