显示/隐藏，滑入/滑出和淡入/淡出不工作 - Javascript

我无法让我的滑动/滑出和淡入/淡出工作。这是我想要完成的...显示/隐藏，滑入/滑出和淡入/淡出不工作 - Javascript

1）对于5K/10K事件，当用户单击图片时，使用显示/隐藏方法使事件列表出现和消失。

2）对于半程马拉松赛事，当用户点击图片时，使用slideUp/slideDown方法使事件列表出现，消失。

3）对于Full Marathon事件，当用户点击图片时，使用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>

来源

2017-10-10 Allison Gandara

有如下几个问题：我移动

我改变$("#5kpic").clickfunction(){到$("#5kpic").click(function(){
我改变</br>到<br/>，自行闭合的标签
到<script>他底部的<body>标签，使$(document).ready不再需要
我改变了显示/隐藏到toggle，
我改变效果基本show /了slideDown到slideToggle
我改变淡入/淡出到fadeToggle
我添加CSS隐藏在页面加载

<!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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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，所以我使用跑鞋。

来源

2017-10-10 20:25:35 styfle

显示/隐藏，滑入/滑出和淡入/淡出不工作 - Javascript

回答

相关问题