Javascript 当单击标题时，新列表向下滑动时，jQuery向上滑动显示列表？_Javascript_Html_Jquery

Javascript 当单击标题时，新列表向下滑动时，jQuery向上滑动显示列表？

javascript html jquery

Javascript 当单击标题时，新列表向下滑动时，jQuery向上滑动显示列表？,javascript,html,jquery,Javascript,Html,Jquery,我有一个事件列表，每个事件都是一个标题。当我单击某个事件时，它下面会出现一个列表，显示日期和位置。当我单击其他标题时，当前显示的列表会向下滑动，并为我单击的标题显示一个新的列表。当我点击一个新标题时，我很难让列表消失。谢谢你的帮助 <!DOCTYPE html> <html lang="en"> <head> <title>FV Runners</title> <meta charset="UTF-8

我有一个事件列表，每个事件都是一个标题。当我单击某个事件时，它下面会出现一个列表，显示日期和位置。当我单击其他标题时，当前显示的列表会向下滑动，并为我单击的标题显示一个新的列表。当我点击一个新标题时，我很难让列表消失。谢谢你的帮助

<!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(){
    // Hides the lists on load
    $('ul').hide();

    // Toggles(hides) all list items except the element that was clicked.
    function hideEverything(elem) {
        $('.race_box').each(function() {
          let clicked = $(elem).siblings('div').attr('id');
          let currElem = $(this).find('div').attr('id');
          let visible = $(this).find('ul').is(":visible");
          if (visible && currElem != clicked) {
            switch (currElem) {
              case "5k":
                $(this).find('ul').slideToggle();
                break;
              case "half":
                $(this).find('ul').slideToggle();
                break;
              case "full":
                $(this).find('ul').slideToggle();
                break;
            }
          }
        })

      }

      // Click on an event name to show the event date and location

      // SlideUp/Down
      $('.mini').click(function() {
        hideEverything(this);
        $('#mini').slideToggle();
      });
      $('.iron').click(function() {
        hideEverything(this);
        $('#iron').slideToggle();
      });
      $('.twilight').click(function() {
        hideEverything(this);
        $('#twilight').slideToggle();
      });
      $('.river').click(function() {
        hideEverything(this);
        $('#river').slideToggle();
      });
      $('.new').click(function() {
        hideEverything(this);
        $('#new').slideToggle();
      });
      $('.winnebago').click(function() {
        hideEverything(this);
        $('#winnebago').slideToggle();
      });
      $('.cheesehead').click(function() {
        hideEverything(this);
        $('#cheesehead').slideToggle();
      });
      $('.lakes').click(function() {
        hideEverything(this);
        $('#lakes').slideToggle();
      });
      $('.fox').click(function() {
        hideEverything(this);
        $('#fox').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">
        <h3 class="5k" id="5k">5k/10 Events</h3>
        <div>
          <h4 class="mini">Mini Sprint</h2>
            <ul id=mini>
              <li></br>10/30/20</br>Memorial Park</br>Appleton</li>
            </ul>
          <h4 class="iron">Iron Horse</h2>
          <ul id="iron">
            <li></br>11/06/20</br>Bay Beach Park</br>Green Bay</li>
          </ul>
          <h4 class="twilight">Twilight Trail</h2>
          <ul id="twilight">
            <li></br>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 class="half">Half Marathon Events</h3>
        <div>
          <h4 class="river">Fox River Marathon</h4>
            <ul id="river">
              <li>10/15/20</br>Pierce Park</br>Appleton</li>
            </ul>
          <h4 class="new">N.E.W. Half Marathon</h4>
            <ul id="new">
              <li>10/29/20</br>Bay Beach Park</br>Green Bay</li>
            </ul>
          <h4 class="winnebago">Winnebago Run</h4>
            <ul id="winnebago">
              <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 class="full">Full Marathon Events</h3>
        <div>
          <h4 class="cheesehead">Cheesehead Marathon</h4>
            <ul id="cheesehead">
              <li>9/24/20</br>Pamperin Park</br>Green Bay</li>
            </ul>
          <h4 class="lakes">Chain O'Lakes Marathon</h4>
            <ul id="lakes">
              <li>10/29/20</br>Bay Beach Park</br>Green Bay</li>
            </ul>
          <h4 class="fox">Fox Cities Marathon</h4>
            <ul id="fox">
              <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>


FV跑步者
$（文档）.ready（函数（）{
//隐藏加载时的列表
$（'ul'）.hide（）；
//切换（隐藏）除单击的元素外的所有列表项。
函数隐藏所有内容（elem）{
$（'.race_box'）。每个（函数（）{
let clicked=$（elem）.sibbines（'div'）.attr（'id'）；
让currElem=$（this.find（'div'）.attr（'id'）；
let visible=$（this.find（'ul'）。是（“：visible”）；
如果（可见和当前！=单击）{
开关（电流）{
案例“5k”：
$（this.find（'ul'）.slideToggle（）；
打破
案例“一半”：
$（this.find（'ul'）.slideToggle（）；
打破
案例“完整”：
$（this.find（'ul'）.slideToggle（）；
打破
}
}
})
}
//单击事件名称以显示事件日期和位置
//向下滑动
$（'.mini'）。单击（函数（）{
隐藏一切（这个）；
$（'#mini'）。滑动切换（）；
});
$（'.iron'）。单击（函数（）{
隐藏一切（这个）；
$（'iron'）。滑动切换（）；
});
$（'.twilight'）。单击（函数（）{
隐藏一切（这个）；
$（“#暮色”）.slideToggle（）；
});
$（'.river'）。单击（函数（）{
隐藏一切（这个）；
$（“#河”）.slideToggle（）；
});
$（'.new'）。单击（函数（）{
隐藏一切（这个）；
$（“#新建”）.slideToggle（）；
});
$（'.winnebago'）。单击（函数（）{
隐藏一切（这个）；
$（'#winnebago'）。slideToggle（）；
});
$（'.cheesehead'）。单击（函数（）{
隐藏一切（这个）；
$（“#cheesehead”）.slideToggle（）；
});
$（'.lakes'）。单击（函数（）{
隐藏一切（这个）；
$（“#湖”）.slideToggle（）；
});
$（'.fox'）。单击（函数（）{
隐藏一切（这个）；
$（“#fox”）.slideToggle（）；
});
});
福克斯山谷跑步俱乐部


5k/10k赛事
5k/10赛事
短跑


10/30/20
纪念公园
Appleton

铁马


11/06/20
海湾海滩公园
绿湾

黄昏小径


11/13/20
河边公园
Wrightstown



半程马拉松比赛
半程马拉松比赛
福克斯河马拉松

20年10月15日
皮尔斯公园
阿普尔顿

新英格兰半程马拉松

20年10月29日
海湾海滩公园
绿湾

温尼贝戈赛跑

20年11月27日
梅诺米尼公园
奥什科什



全程马拉松比赛
全程马拉松比赛
奶酪头马拉松

20年9月24日
潘佩林公园
绿湾

环湖马拉松

20年10月29日
海湾海滩公园
绿湾

福克斯城市马拉松

20年12月11日
梅诺米尼公园
奥什科什

您可以这样使用，当您单击标题时，其他内容将隐藏，只有下一个元素将显示

console.log（“1”）；
$（文档）.ready（函数（）{
$（“.head”）。在（“单击”，函数（）{
$（“.content”）.hide（）；
$（this）.next（“.content”）.slideToggle（）；
});
});
.content{
显示：无；
}

短跑
10/30/20阿普尔顿纪念公园
短跑
10/30/20阿普尔顿纪念公园
短跑
10/30/20阿普尔顿纪念公园
短跑
10/30/20阿普尔顿纪念公园