我希望一次只显示一个事件。单击另一个事件时，它应隐藏最后一个事件。现在，所有事件都保持可见，我无法弄清楚如何隐藏以前点击过的事件。
有没有人建议我一次只能隐藏一个事件？
我希望一次只显示一个事件。单击另一个事件时，它应隐藏最后一个事件。现在，所有事件都保持可见，我无法弄清楚如何隐藏以前点击过的事件。
有没有人建议我一次只能隐藏一个事件？
AbyssJewel = (bool)item["abyssJewel"];
答案 0 :(得分：0)
一次只显示一个事件的方法是为所有事件提供一个可用于隐藏所有事件的类。
因此，当您想要展示新活动时，您只需
答案 1 :(得分：0)
我认为这就是你想要的，我所做的就是当有人点击任何事件时我隐藏了每个事件，除了用户点击的事件，并决定是否隐藏或在主要功能中显示该事件。
onload=hide;
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
hide(this);
this.nextElementSibling.classList.toggle("hide");
}
}
function hide(e){
for (i = 0; i < acc.length; i++) {
if(e!==acc[i] && acc[i].nextElementSibling.classList.value.indexOf("hide")<0)
acc[i].nextElementSibling.classList.toggle("hide");
}
}.hide{
display:none;
}<!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" />
<style>
.panel {
color: orange;
}
#a:hover {
color: gray;
}
</style>
</head>
<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div>
<div id="main"></div>
<div id="pics">
<div class="race_box">
<div class="races" id="5k">
<h3>5k/10 Events</h3>
<ul>
<li class="accordion" id="a">Mini Sprint</li>
<div class="panel">
<p>10/30/17, Memorial Park, Appleton</p>
</div>
<br>
<li class="accordion" id="a">Iron Horse</li>
<div class="panel">
<p>11/6/17, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Twilight Trail</li>
<div class="panel">
<p>11/13/17, River's Edge Park, Wrightstown</p>
</div>
</ul>
</div>
</div>
<div class="race_box">
<div class="races" id="half">
<h3>Half Marathon Events</h3>
<ul>
<li class="accordion" id="a">Fox River Marathon</li>
<div class="panel">
<p>10/15/17, Pierce Park, Appleton</p>
</div>
<br>
<li class="accordion" id="a">N.E.W. Half Marathon</li>
<div class="panel">
<p>10/29/17, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Winnebago Run</li>
<div class="panel">
<p>11/27/17, Menominee Park, Oshkosh</p>
</div>
</ul>
</div>
</div>
<div class="race_box">
<div class="races" id="full">
<h3>Full Marathon Events</h3>
<ul>
<li class="accordion" id="a">Cheesehead Marathon</li>
<div class="panel">
<p>9/24/17, Pamperin Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Chain O'Lakes Marathon</li>
<div class="panel">
<p>10/29/17, Bay Beach Park, Green Bay</p>
</div>
<br>
<li class="accordion" id="a">Fox Cities Marathon</li>
<div class="panel">
<p>11/12/17, Menominee Park, Oshkosh</p>
</div>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
答案 2 :(得分：0)
如果你打算使用Jquery的accordion组件，这里是他们的示例页面的改编版。此处还有JsFiddle。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
expanded: false,
active: false,
autoHeight: false,
autoActivate: false
});
});
</script>
</head>
<body>
<div id="main">
<h3>5k/10k Events</h3>
<div class="accordion">
<h3>Mini Sprint</h3>
<div class='panel'>
<p>10/30/17, Memorial Park, Appleton</p>
</div>
<h3>Iron Horse</h3>
<div class='panel'>
<p>11/6/17, Bay Beach Park, Green Bay</p>
</div>
<h3>Twilight Trail</h3>
<div class='panel'>
<p>11/13/17, River's Edge Park, Wrightstown</p>
</div>
</div>
<h3>Half Marathon Events</h3>
<div class="accordion">
<h3>Fox River Marathon</h3>
<div class="panel">
<p>10/15/17, Pierce Park, Appleton</p>
</div>
<h3>N.E.W. Half Marathon</h3>
<div class="panel">
<p>10/29/17, Bay Beach Park, Green Bay</p>
</div>
<h3>
Winnebago Run</h3>
<div class="panel">
<p>11/27/17, Menominee Park, Oshkosh</p>
</div>
</div>
<h3>Full Marathon Events</h3>
<div class="accordion">
<h3>Cheesehead Marathon</h3>
<div class="panel">
<p>9/24/17, Pamperin Park, Green Bay</p>
</div>
<h3>Chain O'Lakes Marathon</h3>
<div class="panel">
<p>10/29/17, Bay Beach Park, Green Bay</p>
</div>
<h3>Fox Cities Marathon</h3>
<div class="panel">
<p>11/12/17, Menominee Park, Oshkosh</p>
</div>
</div>
</div>
</body>
</html>
显然，造型仍然由你决定。
希望这有帮助！