欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JQuery学习笔记之手网琴效果

程序员文章站 2022-03-18 16:27:39
这种东西在网上多的是，最近在学JQuery，所以就写了个随笔 ......

这种东西在网上多的是，最近在学jquery，所以就写了个随笔

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery安全之手风琴效果</title>
    <style>
        .wrap {
            width: 200px;
            height: auto;
            margin: 50px auto;
            border-radius: 5px
        }

        ul, li, h4 {
            list-style: none;
            margin: 0;
            padding: 0
        }

        .wrap > ul {
            border-radius: 5px
        }

        .wrap > ul > li {
            background: #e4644b;
            text-align: center;
            border-bottom: solid 1px #ded1d1;
            color: #fff;
            cursor: pointer;
            position: relative;
        }

        .wrap > ul > li:last-child {
            border-bottom: none;
        }

        .wrap > ul > li h4 {
            padding: 8px 0;
        }

        .wrap > ul li span {
            position: absolute;
            top: 5px;
            right: 12px;
            font-size: 22px;
            color: #fff;
            display: inline-block;
        }

        .wrap > ul > li .child-ul {
            background: #fff;
            display: none;
        }

        .wrap > ul > li .child-ul li {
            color: #000;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="menu">
        <li>
            <h4>软件jiaoxue</h4>
            <span>+</span>
            <ul class="child-ul">
                <li>java</li>
                <li>web前端</li>
                <li>安卓开发</li>
                <li>软件测试</li>
            </ul>
        </li>
        <li>
            <h4>游戏动漫</h4>
            <span>+</span>
            <ul class="child-ul">
                <li>java</li>
                <li>web前端</li>
                <li>安卓开发</li>
                <li>软件测试</li>
            </ul>
        </li>
        <li>
            <h4>电商企业</h4>
            <span>+</span>
            <ul class="child-ul">
                <li>淘宝</li>
                <li>天猫</li>
                <li>京东</li>
                <li>苏宁易购</li>
            </ul>
        </li>
        <li>
            <h4>营销培训</h4>
            <span>+</span>
            <ul class="child-ul">
                <li>seo</li>
                <li>微信营销</li>
                <li>网络创业</li>
                <li>市场营销</li>
            </ul>
        </li>
    </ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //方法1.鼠标悬浮显示和隐藏
        // var $li = $(".wrap>.menu>li");
        // $li.mouseenter(function(){
        //  $(this).find(".child-ul").show();
        //  //让其他的全部隐藏,这个其实不用写,我们只要写一个离开隐藏就好了
        // });
        // $li.mouseleave(function(){
        // $(this).find(".child-ul").hide();
        // });

        //方式2.点击显示和关闭
        // var $li = $(".wrap>.menu>li");
        // $li.on("click", function() {
        //  $(this).find(".child-ul").show();
        //  //让其他兄弟隐藏
        //  $(this).siblings().find(".child-ul").hide();
        // });


        // 方式3.有个动画隐藏和显示,
        $(".wrap>ul>li").on("click", function () {
            var next = $(this).children(".child-ul");
            var icon = $(this).children("span");
            next.slidetoggle('fade');
            if (icon.html() === "+") {
                icon.html("-");
            } else {
                icon.html("+");
            }
            $('.child-ul').not(next).slideup('fast'); //不是当前点击的内容全部向上收起
            $('.wrap>ul>li').children("span").not(icon).html("+");
            return false;
        })

    })
</script>
</body>
</html>

上一篇： Java中的两种for循环介绍

下一篇： ajax请求完之前的loading加载

推荐阅读