基於jQuery製作的手風琴摺疊菜單

最後更新：2017-08-14 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：href none txt on() style type logs 密碼 toggle

初始化為全部隱藏

點第一個，顯示第一個所隱藏的內容

當點第二個的時候，第一個的內容隱藏，第二個欄目的內容顯示，以此類推

下面是代碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/22px "Microsoft YaHei", arial, serif;
        }

        a, a:link, a:visited {
            color: #ccc;
            text-decoration: none;
        }

        .content {
            margin: 50px auto;
            width: 220px;
            height: auto;
        }

        .content > ul {
            list-style: none;
        }

        .content .menu-one > li {
            width: 220px;
            height: auto;
            overflow: hidden;
            border-top: 1px solid #888;
        }

        .content .menu-one > li.firstChild {
            border: 0;
        }

        .content .menu-one .header {
            height: 35px;
            background: #666;
            line-height: 34px;
            text-indent: 15px;
            cursor: pointer;
        }

        .content .menu-one .header:hover, .content .menu-one .menuOne-current {
            background: #777;
        }

        .content .menu-one .header > span {
            display: block;
        }

        .content .menu-one .header .txt {
            float: left;
            color: #fff;
        }

        .content .menu-one .header .arrow {
            float: right;
            width: 35px;
            height: 35px;
            background: url(arrow-d.png) no-repeat center center;
        }

        .content .menu-two {
            display: none;
            width: 220px;
            height: auto;
        }

        .content .menu-two li {
            width: 220px;
            height: 35px;
            background: #eee;
            border-top: 1px solid #ccc;
            line-height: 34px;
            text-indent: 40px;
        }

        .content .menu-two li.firstChild {
            border: 0;
        }

        .content .menu-two li a {
            display: block;
            color: #888;
        }

        .content .menu-two li:hover, .content .menu-two li.menuTwo-current {
            background: #fff;
        }

        .content .menu-show .header {
            background: #777;
        }

        .content .menu-show .header .arrow {
            background-image: url(arrow-u.png);
        }
    </style>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

</head>
<body>

<div class="content">
    <ul class="menu-one">
        <li class="firstChild">
            <div class="header"><span class="txt">一、HTML5基礎教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">HTML5基礎教程01</a></li>
                <li><a href="#">HTML5基礎教程02</a></li>
                <li><a href="#">HTML5基礎教程03</a></li>
                <li><a href="#">HTML5基礎教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">二、CSS3基礎教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">CSS3基礎教程01</a></li>
                <li><a href="#">CSS3基礎教程02</a></li>
                <li><a href="#">CSS3基礎教程03</a></li>
                <li><a href="#">CSS3基礎教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">三、JavaScript基礎教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">JavaScript基礎教程01</a></li>
                <li><a href="#">JavaScript基礎教程02</a></li>
                <li><a href="#">JavaScript基礎教程03</a></li>
                <li><a href="#">JavaScript基礎教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">四、PHP基礎教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">PHP基礎教程01</a></li>
                <li><a href="#">PHP基礎教程02</a></li>
                <li><a href="#">PHP基礎教程03</a></li>
                <li><a href="#">PHP基礎教程04</a></li>
            </ul>
        </li>
        <li>
            <div class="header"><span class="txt">五、IOS基礎教程</span> <span class="arrow"></span></div>
            <ul class="menu-two">
                <li class="firstChild"><a href="#">IOS基礎教程01</a></li>
                <li><a href="#">IOS基礎教程02</a></li>
                <li><a href="#">IOS基礎教程03</a></li>
                <li><a href="#">IOS基礎教程04</a></li>
            </ul>
        </li>
    </ul>
</div>


<script>
    $(document).ready(function () {
        var aMenuOneLi = $(".menu-one > li");
        var aMenuTwo = $(".menu-two");

        $(".menu-one > li > .header").each(function (i) {
            $(this).click(function(){
                if ($(aMenuTwo[i]).css("display") == "block") {
                    $(aMenuTwo[i]).slideUp(300);
                    $(aMenuOneLi[i]).removeClass("menu-show")
                }else{
                    for (var j = 0; j < aMenuTwo.length; j++) {
                        $(aMenuTwo[j]).slideUp(300);
                        $(aMenuOneLi[j]).removeClass("menu-show");
                    }
                    $(aMenuTwo[i]).slideDown(300);
                    $(aMenuOneLi[i]).addClass("menu-show")
                }
            });
        });
    });
</script>
</body>
</html>

第二種方法（ps:跟第一個相比第二個比較簡陋，但也是能用的）

<ul>
    <li class="">
        <a href="javascript:;">
            <img src="images/p6-1.png" ><span>我的資料</span>
        </a>
        <ul>
            <li>
                <a href="wodeziliao.html">
                    <span>我的資料</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="images/p6-2.png" ><span>我的發布</span>
        </a>
        <ul>
            <li><a href="wodefabu.html"><span>我的發布</span></a></li>
            <li><a href="wodefabu.html"><span>我的發布</span></a></li>
            <li><a href="wodefabu.html"><span>我的發布</span></a></li>
            <li><a href="wodefabu.html"><span>我的發布</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="images/p6-3.png" ><span>我的收藏</span>
        </a>
        <ul>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
            <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="images/p6-4.png" ><span>我的預約</span>
        </a>
        <ul>
            <li><a href=""><span>我的預約</span></a></li>
            <li><a href=""><span>我的預約</span></a></li>
            <li><a href=""><span>我的預約</span></a></li>
            <li><a href=""><span>我的預約</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="javascript:;">
            <img src="images/p6-5.png" ><span>我的訂單</span>
        </a>
        <ul>
            <li><a href=""><span>我的訂單</span></a></li>
            <li><a href=""><span>我的訂單</span></a></li>
            <li><a href=""><span>我的訂單</span></a></li>
            <li><a href=""><span>我的訂單</span></a></li>
        </ul>
    </li>
    <li class="">
        <a href="xiugaimima.html">
            <img src="images/p6-6.png" ><span>修改密碼</span>
        </a>
    </li>
    <li class="">
        <a href="">
            <img src="images/p6-7.png" ><span>退出帳號</span>
        </a>
    </li>
</ul>

$(".Ep_my_data li").click(function(){
    $(this).toggleClass("ssde");
    $(this).children(".Ep_my_data li ul").slideToggle("slow");
});

基於jQuery製作的手風琴摺疊菜單

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More