单击标题时，jQuery 上下滑动 ul

Question

对于我的页面，我有一个“head”类的标题。 当我点击它们时，它们应该在它们下面显示“内容”的 ul 类，当点击新标题时，当前显示的列表消失，新标题的新列表出现。 我记下了，但是说我单击标题 1 并显示列表一。 当我再次单击它时，我需要将列表向上滑动，但我无法让它变成那样。 这是我到目前为止：

<!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(){
    $(".head").on("click", function(){
      $(".content").hide();
      $(this).next(".content").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" id="5k">
        <h3>5k/10 Events</h3>
        <div>
          <h4 class="head">Mini Sprint</h4>
            <ul class="content">
              <li>10/30/20<br>Memorial Park<br>Appleton</li>
            </ul>
          <h4 class="head">Iron Horse</h4>
          <ul class="content">
            <li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
          </ul>
          <h4 class="head">Twilight Trail</h4>
          <ul class="content">
            <li>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>Half Marathon Events</h3>
        <div>
          <h4 class="head">Fox River Marathon</h4>
            <ul class="content">
              <li>10/15/20<br>Pierce Park<br>Appleton</li>
            </ul>
          <h4 class="head">N.E.W. Half Marathon</h4>
            <ul class="content">
              <li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
            </ul>
          <h4 class="head">Winnebago Run</h4>
            <ul class="content">
              <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>Full Marathon Events</h3>
        <div>
          <h4 class="head">Cheesehead Marathon</h4>
            <ul class="content">
              <li>9/24/20<br>Pamperin Park<br>Green Bay</li>
            </ul>
          <h4 class="head">Chain O'Lakes Marathon</h4>
            <ul class="content">
              <li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
            </ul>
          <h4 class="head">Fox Cities Marathon</h4>
            <ul class="content">
              <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

您只需要从您调用hide的选择中排除当前项目。 not方法对此很有效。

 $(document).ready(function() { $(".head").on("click", function() { let $list = $(this).next(".content"); $(".content").not($list).hide(); $list.slideToggle(); }) })

 .content { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h4 class="head">Mini Sprint</h4> <ul class="content"> <li>10/30/20<br>Memorial Park<br>Appleton</li> </ul> <h4 class="head">Iron Horse</h4> <ul class="content"> <li>11/06/20<br>Bay Beach Park<br>Green Bay</li> </ul> <h4 class="head">Twilight Trail</h4> <ul class="content"> <li>11/13/20<br>>River's Edge Park<br>Wrightstown</li> </ul>

单击标题时，jQuery 上下滑动 ul

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-25 06:27:44

单击标题时，jQuery 上下滑动 ul

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-25 06:27:44

解决方案1
1 已采纳 2020-10-25 06:27:44