我正在嘗試創建一個“.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>uj5u.com熱心網友回復：
您的 HTML 幾乎是無效的，您不應該將 div 放在ul和li之外。Onl li是ul的有效直接子代。
將div放在li中，你應該沒問題，因為那樣它將是你的“年”元素的子元素。
uj5u.com熱心網友回復：
您的標記無效 =<ul>應該只包含<li>. 移動尾隨/結束標簽關閉，您可以根據需要切換子元素。
$(".years").on('click', function(e) {
e.preventDefault();
console.log($(this).children('.award').length);
$(this).find('.award').toggleClass('active');
});.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
<div class="award">
<h5>Content1</h5>
</div>
</li>
<li class="years">2009
<div class="award">
<h5>Content2</h5>
</div>
<div class="award">
<h5>Content3</h5>
</div>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485395.html
標籤：javascript jQuery 这个