javascript - 单击标题时jQuery上下滑动ul
问题描述
对于我的页面,我的标题带有“head”类。当我单击它们时,它们应该在它们下面显示“内容”的 ul 类,并且当单击新标题时,当前显示的列表将消失,并出现新标题的新列表。我把它记下来了,但是说我单击标题 1 并显示列表一。当我再次单击它时,我需要将列表向后滑动,但我无法让它成为那样。这是我到目前为止所拥有的:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/my_style.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$(".head").on("click", function(){
$(".content").hide();
$(this).next(".content").slideToggle();
})
})
</script>
</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>
<div>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
</div>
</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>
<div>
<h4 class="head">Fox River Marathon</h4>
<ul class="content">
<li>10/15/20<br>Pierce Park<br>Appleton</li>
</ul>
<h4 class="head">N.E.W. Half Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Winnebago Run</h4>
<ul class="content">
<li>11/27/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</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>
<div>
<h4 class="head">Cheesehead Marathon</h4>
<ul class="content">
<li>9/24/20<br>Pamperin Park<br>Green Bay</li>
</ul>
<h4 class="head">Chain O'Lakes Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Fox Cities Marathon</h4>
<ul class="content">
<li>11/12/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</div> <!-- End of 'full' div-->
</div> <!-- End of 'run3' div-->
</div> <!-- End of 'pics' div-->
</body>
</html>
当我单击同一个标题时,我需要帮助来获取它所在的标题列表以向上滑动。
解决方案
您只需要从您调用的选择中排除当前项目hide
。该not
方法适用于此。
$(document).ready(function() {
$(".head").on("click", function() {
let $list = $(this).next(".content");
$(".content").not($list).hide();
$list.slideToggle();
})
})
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
推荐阅读
- express - Express & Csurf 拒绝 Vue (Axios) 发布请求
- installation - 打开 SAP B1 时,我收到错误“无法连接许可证服务器”
- telegram - 将电报中的内容分享给另一个信使
- php - Angular 4/5 中 php getallheaders() 函数的等价物是什么?
- javascript - 无法使用 window.location 重定向到页面
- twitter-bootstrap - 如何使用 bootstrap-table 插件进行表格分页
- excel - 我怎样才能将其简化为一句话?
- angular5 - 如何在 p-calender 中直接显示启用日期
- numpy - 问题附加具有不同形状的 ndarray
- ios - Swift ios 解析 json 数据只获取选定的数据