gpt4 book ai didi

javascript - 显示/隐藏、滑入/滑出和淡入/淡出不起作用 - Javascript

转载 作者:行者123 更新时间:2023-11-28 04:06:06 26 4
gpt4 key购买 nike

我无法让滑入/滑出和淡入/淡出工作。这就是我想要实现的目标......

1) 对于 5K/10K 事件,当用户点击图片时使用show/hide 方法使事件列表显示和消失。

2) 对于半程马拉松比赛,当用户点击图片时使用SlideUp/slideDown 方法使事件列表出现并消失。

3) 对于全程马拉松赛事,当用户单击图片时,使用fadeIn/fadeOut 方法使事件列表出现和消失。

另外,我也尝试过这样做,但也无法弄清楚......

4) 在加载图片之前使图片下列出的所有事件消失页。仅当用户单击图片时才会显示列表。

5) 页面上一次只能显示一个事件列表。

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#5kpic").clickfunction(){
$("#5k").show().hide();
});

$("#halfpic").click(function(){
$("#half").slideup("slow").slidedown("slow");
});


$("#fullpic").click(function(){
$("#full").fadein("slow").fadeout("slow");
});
});


</script>

<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" id="5kpic" /><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" id="halfpic"/></button><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" id="fullpic"/><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-->

</body>
</html>

最佳答案

下面列出了几个问题:

  1. 我改变了$("#5kpic").clickfunction(){$("#5kpic").click(function(){
  2. 我改变了</br><br/> ,自闭合标签
  3. 我移动了<script>到底部<body>标记为 $(document).ready不再需要
  4. 我将显示/隐藏更改为 toggle ,
  5. 我将 SlideUp/SlideDown 更改为 slideToggle
  6. 我将淡入/淡出更改为 fadeToggle
  7. 我添加了 css 来隐藏 .races页面加载部分

<!DOCTYPE html>
<html lang="en">

<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<style>
.races {
display: none;
}
</style>
</head>

<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div>

<div id="main"></div>

<div id="pics">
<div class="race_box">
<img src="/image/s45qt.png" id="5kpic" /><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>
</div>

<div class="race_box">
<img src="/image/qUfvP.png" id="halfpic" /></button><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>
</div>

<div class="race_box">
<img src="/image/uSq0R.png" id="fullpic" /><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>
</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#5kpic").click(function() {
$("#5k").toggle();
});

$("#halfpic").click(function() {
$("#half").slideToggle("slow");
});


$("#fullpic").click(function() {
$("#full").fadeToggle("slow");
});
</script>
</body>

</html>

我没有你的图片或 CSS,所以我使用了跑鞋。

关于javascript - 显示/隐藏、滑入/滑出和淡入/淡出不起作用 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46672802/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com