折疊下拉菜單

本文轉載自查看原文 2018-05-17 14:08 1229

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <title>折疊</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .page{
            width: 100%;
            margin-top: 10px;
            background: #f2f2f2;
        }
    </style>
</head>
<body>
<ul>
    <li class="page">
        <a class="a">
            一級菜單
        </a>
        <ul class="ul">
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
        </ul>
    </li>
    <li class="page">
        <a class="a">
            一級菜單
        </a>
        <ul class="ul">
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
        </ul>
    </li>
    <li class="page">
        <a class="a">
            一級菜單
        </a>
        <ul class="ul">
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
            <li>
                隱藏的二級菜單項
            </li>
        </ul>
    </li>
</ul>
</body>
<script>
    jQuery(function($){
        $(".a").click(function(){
            $(this).next(".ul").toggle().closest(".page").siblings(".page").children("ul").hide();
        }).next("ul").hide();
    });
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap練習：可折疊下拉菜單 Dropdown 下拉菜單 CSS 下拉菜單 mui下拉菜單 CSS 下拉菜單：如何制作下拉菜單 ElementUI Dropdown 下拉菜單關於下拉菜單和iframe的問題 flutter 下拉菜單封裝仿新浪下拉菜單 bootstrap多級下拉菜單