JQuery學習筆記之手網琴效果

時間 2019-12-05

原文原文鏈接

這種東西在網上多的是，最近在學JQuery，因此就寫了個隨筆javascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。