我正在为有三张图片的页面制作手风琴菜单。第一张图像（5k / 10k）应该在单击时显示/隐藏图像下方的ul。第二张图像，半程马拉松，点击时应该向上/向下滑动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();
});*/
});
更新：仍未能解决这个问题。仍然在努力
有没有人对我能做什么有任何建议？
答案 0 :(得分：0)
点击一个race_box，隐藏所有比赛类，然后找到下一场比赛并显示它。希望这会有所帮助...
<!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" data-toggle="slideToggle">
<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" data-toggle="toggle">
<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" data-toggle="fadeToggle">
<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>
<script>
$(document).ready(function(){
//var accordian = $('.race_box');
$('.races').hide();
$('.race_box').click(function(){
console.log($(this));
//$('.races').hide();
//console.log($(this).find('.races')) ;
var method = $(this).attr("data-toggle");
console.log(method);
var nextRace = $(this).find('.races');
//nextRace.show();
switch(method) {
case "slideToggle" :
nextRace.slideToggle(1000);
break;
case "toggle" :
nextRace.toggle(1000);
break;
case "fadeToggle" :
nextRace.fadeToggle(1000);
break;
}
});
});
</script>
</body>
</html>
答案 1 :(得分：0)
由于你想在每个android:fillViewport="true"上使用不同的显示/隐藏方法，我认为最简单的方法就是有三种不同的点击功能。代码并不优雅，但它易于阅读。
基本方法是：
ul，.toggle()或.slideToggle() - 来显示匹配列表，然后我最初会用CSS隐藏所有列表，而不是使用JavaScript。这样，在JavaScript运行之前，您不必担心列表可能会在页面加载时显示一瞬间。
最后一点，与JS无关：对于你的换行标记，只需执行.fadeToggle()，或者，如果要包含斜杠，请将其设为<br>。 <br/>是无效的HTML。
</br>$(document).ready(function() {
var fiveK = document.getElementById('5k'),
half = document.getElementById('half'),
full = document.getElementById('full');
var fiveKImg = $(fiveK).prev().prev().prev(),
halfImg = $(half).prev().prev().prev(),
fullImg = $(full).prev().prev().prev();
$(fiveKImg).on('click', function() {
$(fiveK).toggle();
if ($(half).is(':visible')) {
$(half).slideToggle();
}
if ($(full).is(':visible')) {
$(full).fadeToggle();
}
});
$(halfImg).on('click', function() {
$(half).slideToggle();
if ($(fiveK).is(':visible')) {
$(fiveK).toggle();
}
if ($(full).is(':visible')) {
$(full).fadeToggle();
}
});
$(fullImg).on('click', function() {
$(full).fadeToggle();
if ($(fiveK).is(':visible')) {
$(fiveK).toggle();
}
if ($(half).is(':visible')) {
$(half).slideToggle();
}
});
});.races {
display: none;
}