javascript - 当使用 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-->