JQuery学习笔记之手网琴效果

来源：cnblogs　　作者：小鱼吃猫　　时间：2019/6/6 8:51:19　　对本文有异议
这种东西在网上多的是，最近在学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>
原文链接：http://www.cnblogs.com/Lyn4ever/p/10982752.html
友情链接：直通硅谷　点职佳　北美留学生论坛
jQuery热门文章

jQuery推荐文章
