1. 程式人生 > >jq寫點選那個那個顯示其他隱藏用到toggleClass

jq寫點選那個那個顯示其他隱藏用到toggleClass

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            margin: 100px;
        }
        
        .one {
            width: 200px;
            margin-bottom: 5px;
        }
        
        .one a {
            background: red;
            text-decoration: none;
            display: block;
            text-align: center
        }
        
        .one p {
            display: none;
            background: green;
        }
    </style>
    <script src="js/jquery-2.1.4.min.js">
    </script>
    <script>
        $(function() {
            $('.one a').click(function() {
                // 判斷當前點選的選項有沒有active這個類名
                if ($(this).hasClass('active')) {
                    //如果有就讓它的兄弟元素隱藏
                    $(this).siblings('p').hide();
                } else {
//不過沒有active這個類就
                    var num = $(this).parent().index();
                    $('.one').eq(num).find('p').show().parent().siblings('.one').find('p').hide();
                }

                $(this).toggleClass('active');  //這個作用是 點選有這個類再次點選就沒這個類
                $(this).parent().siblings('.one').find('a').removeClass('active');  //這句作用是讓它的.one元素下面的 其他元素移除這個類



            })
        })
    </script>

</head>

<body>
    <div class="one">
        <a href="javascript:;">活動1</a>
        <p class="p"> 1日上午,習近平總書記到山西考察調研。從北京直飛呂梁,隨後驅車1個半小時來到興縣,參觀晉綏邊區革命紀念館,向革命烈士敬獻花籃。習近平說,革命戰爭年代,呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代,繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p>
    </div>
    <div class="one">
        <a href="javascript:;">活動2</a>
        <p class="p">2日上午,習近平總書記到山西考察調研。從北京直飛呂梁,隨後驅車1個半小時來到興縣,參觀晉綏邊區革命紀念館,向革命烈士敬獻花籃。習近平說,革命戰爭年代,呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代,繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p>
    </div>
    <div class="one">
        <a href="javascript:;">活動3</a>
        <p class="p">3日上午,習近平總書記到山西考察調研。從北京直飛呂梁,隨後驅車1個半小時來到興縣,參觀晉綏邊區革命紀念館,向革命烈士敬獻花籃。習近平說,革命戰爭年代,呂梁兒女用鮮血和生命鑄就了偉大的呂梁精神。我們要把這種精神用在當今時代,繼續為老百姓過上幸福生活、為中華民族偉大復興而奮鬥</p>
    </div>
</body>

</html>