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

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

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>

最佳答案

下面列出了几个问题:

我改变了$("#5kpic").clickfunction(){至$("#5kpic").click(function(){
我改变了</br>至<br/> ，自闭合标签
我移动了<script>到底部<body>标记为 $(document).ready不再需要
我将显示/隐藏更改为 toggle ,
我将 SlideUp/SlideDown 更改为 slideToggle
我将淡入/淡出更改为 fadeToggle
我添加了 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/

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

上一篇：javascript - 随机展开图像，在容器内不重叠

下一篇：javascript - JS 键盘记录器未正确接受 keyup