使用jQuery单击父级时，如何使子级元素切换？

Question

我一页上有三张照片。 每张图片下面都有三个事件的列表。 当用户单击事件时，该事件的信息应显示在该事件下。 这是我的HTML：

<div id="pics">

        <div class="race_box">
            <img src="images/run1.jpg" /><br />
            <figcaption>5k/10k Events</figcaption>

            <div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li id="sprint">Mini Sprint</li>
                        <ul>
                            <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li>
                        </ul>
                    <li id="iron">Iron Horse</li>
                        <ul>
                            <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li>
                        </ul>
                    <li id="twilight">Twilight Trail</li>
                        <ul>
                            <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li>
                        </ul>
                </ul>
            </div><!--  End of '5k' div-->
        </div> <!-- End of 'run1' div-->

这是我的CSS：

#header {
width: 100%;
height: 50px;
color: #0000ff;  /*blue*/
padding-top: 25px;
padding-left: 10%
}

h1 {
margin-top: -10px;
}

#main {
position: absolute;
z-index: -999;
display: inline-block;
background-color: #808080;  /*grey*/
width: 100%;
height: 250px;
padding: 1%;
width: 100%;
}

#pics {
width: 66%;
margin: 0 auto;
}

#pics figcaption {
color: #fff;  /*white*/
}

.race_box {
float: left;
width: 215px;
margin-right: 7.3%;
margin-top: 25px;
}
li {
list-style-type: none;
padding: 5px;
color: blue;
display: block;
margin-left: -40px;
}
.info {
display: none;
color: black;
}

我尝试将其与.children.children方法一起使用，但无法正常工作。 这是我的JS：

$(document).ready(function() {

    $("li").click(function(){
       $(this).children().children().toggle(); 
    });
});

有什么建议么？ 我希望用户能够单击事件，显示信息，再次单击它并隐藏它。 任何帮助深表感谢！

Answer 1

请将ul内容包装在li标记内，然后像这样更改jquery。

 $(document).ready(function() { $("li").on("click", function() { $(this).find('li').toggle('info'); }); }); 

 #header { width: 100%; height: 50px; color: #0000ff; /*blue*/ padding-top: 25px; padding-left: 10% } h1 { margin-top: -10px; } #main { position: absolute; z-index: -999; display: inline-block; background-color: #808080; /*grey*/ width: 100%; height: 250px; padding: 1%; width: 100%; } #pics { width: 66%; margin: 0 auto; } #pics figcaption { color: #fff; /*white*/ } .race_box { float: left; width: 215px; margin-right: 7.3%; margin-top: 25px; } li { list-style-type: none; padding: 5px; color: blue; display: block; margin-left: -40px; } .info { display: none; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pics"> <div class="race_box"> <img src="images/run1.jpg" /> <br /> <figcaption>5k/10k Events</figcaption> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li id="sprint">Mini Sprint <ul> <li class="info">10/30/17 <br/>Memorial Park <br/>Appleton</li> </ul> </li> <li id="iron">Iron Horse <ul> <li class="info">11/06/17 <br/>Bay Beach Park <br/>Green Bay</li> </ul> </li> <li id="twilight">Twilight Trail <ul> <li class="info">11/13/17 <br/>River's Edge Park <br/>Wrightstown</li> </ul> </li> </ul> </div> <!-- End of '5k' div--> </div> <!-- End of 'run1' div-->