zoukankan      html  css  js  c++  java

  • 基于jQuery制作的手风琴折叠菜单

    初始化为全部隐藏

    点第一个，显示第一个所隐藏的内容

    当点第二个的时候，第一个的内容隐藏，第二个栏目的内容显示，以此类推

    下面是代码部分

    <!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;
                 220px;
                height: auto;
            }

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

            .content .menu-one > li {
                 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;
                 35px;
                height: 35px;
                background: url(arrow-d.png) no-repeat center center;
            }

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

            .content .menu-two li {
                 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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><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" alt=""><span>修改密码</span>
            </a>
        </li>
        <li class="">
            <a href="">
                <img src="images/p6-7.png" alt=""><span>退出账号</span>
            </a>
        </li>
    </ul>

    $(".Ep_my_data li").click(function(){
        $(this).toggleClass("ssde");
        $(this).children(".Ep_my_data li ul").slideToggle("slow");
    });
  • 相关阅读:
    用迁移学习创造的通用语言模型ULMFiT，达到了文本分类的最佳水平
    论文分享|《Universal Language Model Fine-tuning for Text Classificatio》
    tesnorflow实现N个epoch训练数据读取的办法
    理解TensorFlow的Queue
    tensorflow基本操作介绍
    前端框架 Vue 初探
    LeetCode 292 Nim Game（Nim游戏）
    设计模式有感
    说说翻转的数据结构课
    java 中xml转换为json对象
  • 原文地址：https://www.cnblogs.com/li-sir/p/7359212.html
Copyright © 2011-2022 走看看