jQuery下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <style>
        li{
            list-style: none;
        }
        ul{
            padding: 0px;
            margin: 0px;
        }
        .main{
            background-color: aquamarine;
            background-repeat: no-repeat;
            width: 100px;
            width: 600px;
        }
        li{
            background-color: salmon;
        }
        a{
            display: block;
            width: 80px;
            padding: 3px 0px 3px 20px;
        }
        .main a{
            color: white;
        }
        .main li a{
            color: blue;
        }
        .main ul{
            display: none;
        }
        .h{
            float: left;
        }
        .main ul li{
            float: left;
            width: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="main"><a href="#">菜单1</a>
            <ul>
                <li><a href="#">菜单项1</a> </li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
        <li class="main"><a href="#">菜单2</a>
            <ul>
                <li><a href="#">菜单项1</a></li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
        <li class="main"><a href="#">菜单3</a>
            <ul>
                <li><a href="#">菜单项1</a></li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
    </ul>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <ul>
        <li class="main h"><a href="#">菜单1</a>
            <ul>
                <li><a href="#">菜单项1</a> </li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
        <li class="main h"><a href="#">菜单2</a>
            <ul>
                <li><a href="#">菜单项1</a></li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
        <li class="main h"><a href="#">菜单3</a>
            <ul>
                <li><a href="#">菜单项1</a></li>
                <li><a href="#">菜单项2</a></li>
                <li><a href="#">菜单项3</a></li>
            </ul>
        </li>
    </ul>

</body>
<script type="text/javascript">
    $(document).ready(function(){
       $(".main>a").on("click",function(){
           $(this).next("ul").slideToggle(500);
       });
由于next是取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合，所以选择要通过$(".main>a")来达到next的同辈元素，<a>的同辈元素是<ul>
       $(".main>a").hover(function(){
            $(this).next("ul").slideDown(550);
        },function(){
            $(this).next("ul").slideUp(550);
        });
       $(".main").hover(function(){
            $("ul",this).slideDown(500);
        },function(){
            $("ul",this).slideUp(500);
        });
//$('a','b')，$('子','父')，从父节点中找子节点，并且取值
        $(".main").hover(function(){
             $(this).children("ul").slideDown(550);
         },function(){
             $(this).children("ul").slideUp(550);
        });
children获得匹配元素集合中每个元素的子元素，选择器选择性筛选。由于是子元素，所以不能通过$(".main>a")来选择
    });
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容