$(this).children() 不起作用

Question

我正在尝试创建一个“.years”列表。当我单击第一年（es.2009）时，它应该仅显示该年内的内容（在本例中为“Content1”）。当我单击列表 .years 的另一个元素时，“Content1”应该隐藏。

$(".years").click(function(e) {
  e.preventDefault();
  console.log($(this).children());
  //console.log($(this).find("h5"));       
  //.find($(".award"))

  //$('.award').toggleClass('active'); //this is what I want to do

});

.award {
  display: none;
}

.award.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="years">2004</li>
  <div class="award">
    <h5>Content1</h5>
  </div>
  <li class="years">2009</li>
  <div class="award">
    <h5>Content2</h5>
  </div>
  <div class="award">
    <h5>Content3</h5>
  </div>
</ul>

Answer 1

1. 您的 HTML 几乎无效，您不应该将 div 放在ul内部和li外部。只有li是ul的有效直接子代。

2. 将div放入li中，应该没问题，因为它将成为“years”元素的子元素。