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

Question

我有一个事件列表，每个事件都是一个标题。 当我点击一个事件时，它下面会出现一个列表，显示日期和地点。 当我单击不同的标题时，当前显示的列表会向下滑动，并且我单击的标题会出现一个新列表。 单击新标题时，我无法让列表消失。 帮助表示赞赏！

<!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>

Answer 1

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

 console.log("1"); $(document).ready(function(){ $(".head").on("click",function() { $(".content").hide(); $(this).next(".content").slideToggle(); }); });

 .content { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accPanel"> <div class="head">Mini Sprint</div> <div class="content"> 10/30/20 Memorial Park Appleton </div> </div> <div class="accPanel"> <div class="head">Mini Sprint</div> <div class="content"> 10/30/20 Memorial Park Appleton </div> </div> <div class="accPanel"> <div class="head">Mini Sprint</div> <div class="content"> 10/30/20 Memorial Park Appleton </div> </div> <div class="accPanel"> <div class="head">Mini Sprint</div> <div class="content"> 10/30/20 Memorial Park Appleton </div> </div>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-15 19:30:13

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-15 19:30:13

解决方案1
1 已采纳 2020-10-15 19:30:13