极简的菜单栏收放实现

最新推荐文章于 2023-03-28 20:03:08 发布

上弦月Z

最新推荐文章于 2023-03-28 20:03:08 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/qq_37825370/article/details/82347712

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单收放</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <style>
        ul,li{
            list-style: none;
        }

        ul{
            margin-top: 0px;
            margin-bottom: 0px;
        }

        li{
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .menu3_tab{
            border-collapse: collapse;
        }
        .menu3_td0{
            border: 1px solid #353F4F;
            background: #353F4F;
            width: 165px;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            color: #FFFFFF;
            padding-left: 30px;
            font-size: 18px;
            border-top: 1px solid #475268;
        }

        .menu3_td0_act{
            border: 1px solid #353F4F;
            background: #353F4F;
            width: 165px;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            color: #FFFFFF;
            padding-left: 30px;
            font-size: 18px;
            border-top: 1px solid #475268;
            border-bottom: 1px solid #475268;
        }

        .menu3_td{
            border: 1px solid #353F4F;
            background: #353F4F;
            width: 150px;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            color: #FFFFFF;
            padding-left: 45px;
            margin-left: -40px;
        }
    </style>
</head>
<body>
<div class="menu3">
    <div id="tab_menu_sales" class="menu3_tab" style="border-collapse: collapse;">
        <li class="menu3_td0" style="border-top: none;">Html</li>
        <ul style="display: none;">
            <a href="###"><li  class="menu3_td">1</li></a>
            <a href="###"><li  class="menu3_td">2</li></a>
            <a href="###"><li  class="menu3_td">3</li></a>
            <a href="###"><li  class="menu3_td">4</li></a>
            <a href="###"><li  class="menu3_td">5</li></a>
        </ul>
        <li class="menu3_td0">Java</li>
        <ul style="display: none;">
            <a href="###"><li class="menu3_td">1</li></a>
            <a href="###"><li class="menu3_td">2</li></a>
            <a href="###"><li class="menu3_td">3</li></a>
            <a href="###"><li class="menu3_td">4</li></a>
            <a href="###"><li class="menu3_td">5</li></a>
            <a href="###"><li class="menu3_td">6</li></a>
        </ul>
        <li class="menu3_td0">Oracle</li>
        <ul style="display: none;">
            <a href="###"><li class="menu3_td">1</li></a>
        </ul>
        <li class="menu3_td0">PHP</li>
    </div>
</div>
</body>
<script>
    window.onload = function () {
        $('.menu3_td0').click(function(){
            if($(this).next('ul').css('display')=='none'){
                $(this).addClass('menu3_td0_act');
                $(this).next('ul').slideDown(100).children('tr');
            }else{
                $(this).removeClass('menu3_td0_act');
                $(this).next('ul').slideUp(100);
            }
        });
    }
</script>
</html>