javascript - 点击一个li显示里面div内容，点击下一个li显示下一个li里面div内容，并隐藏前一个li所显示的内容，js代码如何写？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 点击一个li显示里面div内容，点击下一个li显示下一个li里面div内容，并隐藏前一个li所显示的内容，js代码如何写？

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

[JavaScript讨论组]

1341

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

怪我咯

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

全部回复(1)

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

不知道题主是否用JQuery不，用JQuery的siblings()方法选择同级元素。

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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>