javascript - 点击一个li显示里面div内容，点击下一个li显示下一个li里面div内容，并隐藏前一个li所显示的内容，js代码如何写？
问题描述
<ul><li >热销榜 <p class='content_item'><ul > <li ng-repeat='item in chaoshi'><p><img src='https://www.haobala.com/wenda/{{item.img}}' alt=''></p><p>{{item.name}}</p><p> </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='https://www.haobala.com/wenda/{{item.img}}' alt=''></p><p>{{item.name}}</p><p> </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='https://www.haobala.com/wenda/{{item.img}}' alt=''></p><p>{{item.name}}</p><p> </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：不知道题主是否用JQuery不，用JQuery的siblings()方法选择同级元素。
demo
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <script type='text/javascript' src='https://www.haobala.com/wenda/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>
网公网安备