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

Question

I have three pictures on a page. Each picture has a list of three events underneath them. When the user clicks an event, the info for that event should display under that event. Here is my 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-->

And here is my 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;
}

I tried using this with the .children.children method, but it would not work. Here is my JS:

$(document).ready(function() {

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

Any suggestions? I would like the user to be able to click an event, show the info, click it again and hide it. Any help is much appreciated!

Answer 1

please wrap the ul contents inside the li tag, then change the jquery like so.

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