可伸缩的菜单

Posted 2020-10-18 爱踢两键

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可伸缩的菜单相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>可伸缩的菜单</title>
        <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            ul {
                list-style: none;
                padding: 5px;
                width: 210px;
                border: 1px solid red;
            }
            
            a {
                text-decoration: none;
                line-height: 30px;
            }
            
            .menu_style li {
                border-bottom: 1px solid #666;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("input[name=more_btn]").click(function(){
                    //索引大于5的项目进行隐藏、显示，not(:last)的意思是不包括最后一行
                    $("li:gt(5):not(:last)").toggle();
                });
            });
        </script>
    </head>

    <body>
        <div id="menu" class="menu_style">
            <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>
                <li>
                    <a href="#">厨卫清洁、纸、清洁剂</a>
                </li>
                <li id="menu_07" class="element_hide">
                    <a href="#">家居家纺、锅具餐具</a>
                </li>
                <li id="menu_08" class="element_hide">
                    <a href="#">生活电器、汽车生活</a>
                </li>
                <li id="menu_09" class="element_hide">
                    <a href="#">电脑、外设、办公用品</a>
                </li>
                <li class="btn">
                    <input name="more_btn" type="button" value="展开或关闭菜单项" />
                </li>
            </ul>
        </div>

    </body>

</html>

以上是关于可伸缩的菜单的主要内容，如果未能解决你的问题，请参考以下文章

ugui制作伸缩菜单

JQ写简单的伸缩菜单（内附效果图和源代码）