Question

我无法让我的slidein / slideout和fadein / fadeout工作。这就是我想要完成的......

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>

Answer 1

下面列出了几个问题：

我将$("#5kpic").clickfunction(){更改为$("#5kpic").click(function(){
我将</br>更改为<br/>，即自闭标签
我已将<script>移至<body>代码的底部，以便不再需要$(document).ready
我将show / hide更改为toggle，
我将幻灯片/滑动改为slideToggle
我将fadein / fadeout更改为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="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，所以我用跑鞋。

显示/隐藏，幻灯片输入/输出和淡入/淡出不起作用 - Javascript

1 个答案: