0
我正在爲有三個圖像的頁面製作手風琴菜單。第一張圖像5k/10k應該在點擊時顯示/隱藏圖像下方的ul。第二個圖像，半馬拉松，應單擊滑上/下拉ul。而第三張全馬拉松比賽的圖像應該在點擊時淡化/消失。沒有兩個ul應該同時顯示。我遇到了麻煩，你能幫忙嗎？這裏是HTML：如何在同一個手風琴菜單上使用不同的方法？
<!DOCTYPE html>
<html lang="en">
<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/my_style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div> <!-- End of 'header' div-->
<div id="main">
</div> <!-- End of 'main' div-->
<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>Mini Sprint</br>10/30/17</br>Memorial Park</br>
Appleton</li>
<li>Iron Horse</br>11/06/17</br>Bay Beach Park</br>Green Bay</li>
<li>Twilight Trail</br>11/13/17</br>River's Edge Park</br>Wrightstown</li>
</ul>
</div><!-- End of '5k' div-->
</div> <!-- End of 'run1' div-->
<div class="race_box">
<img src="images/run2.jpg" /><br />
<figcaption>Half Marathon Events</figcaption>
<div class="races" id="half">
<h3>Half Marathon Events</h3>
<ul>
<li>Fox River Marathon 10/15/17</br>Pierce Park</br>Appleton</li>
<li>N.E.W. Half Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
<li>Winnebago Run 11/27/17</br>Menominee Park</br>Oshkosh</li>
</ul>
</div> <!-- End of 'half' div-->
</div><!-- End of 'run2' div-->
<div class="race_box">
<img src="images/run3.jpg" /><br />
<figcaption>Full Marathon Events</figcaption>
<div class="races" id="full">
<h3>Full Marathon Events</h3>
<ul>
<li>Cheesehead Marathon 9/24/17</br>Pamperin Park</br>Green Bay</li>
<li>Chain O'Lakes Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
<li>Fox Cities Marathon 11/12/17</br>Menominee Park</br>Oshkosh</li>
</ul>
</div> <!-- End of 'full' div-->
</div> <!-- End of 'run3' div-->
</div> <!-- End of 'pics' div-->
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_scripts.js"></script>
</body>
</html>
這是目前的Javascript。我知道這是不是很多，但我一直在嘗試不同的東西，從頭剛剛開始：
$(document).ready(function(){
var accordian = $('.race_box');
accordian.find('.races').hide();
$('.race_box').click(function(){
$('#5k').toggle();
});
});
更新嘗試在使用Javascript：
$(document).ready(function(){
var accordian = $('.race_box');
accordian.find('.races').hide();
accordian.find('.race_box').on('click', function(){
$(this).next('.races').slideToggle();
});
/*$('.race_box').click(function(){
$('#5k').slideToggle();
});*/
});
更新：仍然沒有能夠算出這個出。仍然在工作
有沒有人有什麼建議我可以做什麼？
非常感謝你這麼多！你把它隱藏在CSS中是對的，那會更好。此外，我不得不將.on（'click'，function（）改爲.click（function（），因爲這可行，但點擊沒有。無論哪種方式，謝謝你！ – nponinski
@nponinski沒問題！'.on 'click'，function（）{...'vs'.click（function（）...'可能是由於不同版本的jQuery，FYI。如果後者適合你，那麼很棒:) – cjl750