jQuery下级菜单

最新推荐文章于 2021-06-05 23:36:11 发布

原创最新推荐文章于 2021-06-05 23:36:11 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #css

前端专栏收录该内容

36 篇文章

订阅专栏

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-Type" content="text/html; charset=utf-8" />
    <title>jQuery下级菜单</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 12px;
    }
    
    li {
        list-style: none;
    }
    
    ul.nav li {
        width: 200px;
        text-align: center;
        float: left;
        margin-right: 10px;
    }
    
    ul.nav li h3 {
        height: 40px;
        line-height: 40px;
        background: #72a7ff;
    }
    
    ul.nav li ul li h3 {
        background: #ffd9d9;
    }
    
    ul.nav li h3:hover,
    .choice {
        background: #ffc0c0!important;
    }
    
    ul li ul {
        display: none;
    }
    
    ul li.on ul {
        display: block;
    }
    
    ul.nav li {
        position: relative;
    }
    
    ul.nav li ul li ul {
        position: absolute;
        top: 0;
        right: -200px;
    }
    </style>
    <script>
    $(document).ready(function() {
        $("ul.nav li").hover(function() {
                $(this).addClass("on");

            },
            function() {
                $(this).removeClass("on");

            })
        $("ul.nav li").hover(function() {
                $(this).parent("ul").siblings("h3").addClass("choice");

            },
            function() {
                $(this).parent("ul").siblings("h3").removeClass("choice");
            })
    });
    </script>
</head>

<body>
    <ul class="nav">
        <li>
            <h3><a href="">我的网站</a></h3>
            <ul>
                <li>
                    <h3>2级分类</h3>
                </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3></li>
            </ul>
        </li>
        <li>
            <h3>我的网站</h3>
            <ul>
                <li>
                    <h3>2级分类</h3>
                </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3></li>
            </ul>
        </li>
        <li>
            <h3>我的网站</h3>
            <ul>
                <li>
                    <h3>2级分类</h3>
                </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3> </li>
                <li>
                    <h3>2级分类</h3></li>
            </ul>
        </li>
        <li>
            <h3>我的网站</h3> </li>
    </ul>
</body>

</html>