javascript - Klik pada satu li untuk memaparkan kandungan div di dalam, klik pada li seterusnya untuk memaparkan kandungan div di dalam li seterusnya, dan menyembunyikan kandungan yang dipaparkan pada li sebelumnya Bagaimana untuk menulis kod js?-Soal Jawab Rangkaian PHP Cina

masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

javascript - Klik pada satu li untuk memaparkan kandungan div di dalam, klik pada li seterusnya untuk memaparkan kandungan div di dalam li seterusnya, dan menyembunyikan kandungan yang dipaparkan pada li sebelumnya Bagaimana untuk menulis kod js?

怪我咯 2017-07-05 10:42:55

1094

<ul>
<li >热销榜
            <p class="content_item">
                <ul >
                    <li ng-repeat="item in chaoshi">
                        <p><img src="{{item.img}}" alt=""></p>
                        <p>{{item.name}}</p>
                        <p>&nbsp;</p>
                        <p>
                            <p style="color: #b9b9b9;">{{item.specifics}}</p>
                            <p style="color: #ff3800;">￥{{item.price}}</p>
                        </p>
                        <p>+</p>
                    </li>

                </ul>
            </p>
        </li>
        <li >牛奶面包
            <p class="content_item">
                <ul>
                    <li ng-repeat="item in chaoshi1">
                        <p><img src="{{item.img}}" alt=""></p>
                        <p>{{item.name}}</p>
                        <p>&nbsp;</p>
                        <p>
                            <p style="color: #b9b9b9;">{{item.specifics}}</p>
                            <p style="color: #ff3800;">￥{{item.price}}</p>
                        </p>
                        <p>+</p>
                    </li>
                </ul>
            </p>
        </li>
        <li>休闲零食
            <p class="content_item">
                <ul>
                    <li ng-repeat="item in chaoshi2">
                        <p><img src="{{item.img}}" alt=""></p>
                        <p>{{item.name}}</p>
                        <p>&nbsp;</p>
                        <p>
                            <p style="color: #b9b9b9;">{{item.specifics}}</p>
                            <p style="color: #ff3800;">￥{{item.price}}</p>
                        </p>
                        <p>+</p>
                    </li>
                </ul>
            </p>
        </li>
        </ul>

怪我咯

走同样的路，发现不同的人生

membalas semua(1)

女神的闺蜜爱上我2017-07-05 10:44:55 Tingkat 1

Saya tidak tahu sama ada penyoal menggunakan kaedah JQuery不，用JQuery的siblings() untuk memilih elemen pada tahap yang sama.

demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js">
    </script>
    <style media="screen">
        ul {
            text-align: center;
            color: #FFFFFF;
        }

        ul li {
            float: left;
            margin: 20px;
            height: 300px;
            width: 200px;
            list-style: none;
            background: #92aeaf;
            border: 1px solid #CCCCCC;
        }

        ul li p {
            width: 100px;
            height: 30px;
            margin: 200px 50px 0 50px;
            background: #ff5d75;
            border: 1px solid #CCCCCC;
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是li,请点击我
            <p class="">
                我是p
            </p>
        </li>
        <li>我是li,请点击我
            <p class="">
                我是p
            </p>
        </li>
        <li>我是li,请点击我
            <p class="">
                我是p
            </p>
        </li>

    </ul>

</body>
<script type="text/javascript">
    $(function() {
        $("li").click(function() {
            $(this).children("p").show();
            $(this).siblings().children("p").hide();
        })
    })
</script>

</html>