javascript - 點擊一個li顯示里面div內容，點擊下一個li顯示下一個li里面div內容，并隱藏前一個li所顯示的內容，js代碼如何寫？
問題描述
<ul><li >熱銷榜 <p class='content_item'><ul > <li ng-repeat='item in chaoshi'><p><img src='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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>
網公網安備