jQuery сдвигает отображаемый список вверх, когда новый список скользит вниз при нажатии на заголовок?

Question 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(){
    // 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>

javascript html jquery

0

Tony 15 Окт 2020 в 22:09

Answer

Вы можете использовать это так, когда вы нажимаете на заголовок, другой контент будет скрыт, и будет отображаться только следующий элемент.

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>

1

Ishita Ray 15 Окт 2020 в 19:30

Question 2

Вы можете использовать это так, когда вы нажимаете на заголовок, другой контент будет скрыт, и будет отображаться только следующий элемент.

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>

1

Ishita Ray 15 Окт 2020 в 19:30

jQuery сдвигает отображаемый список вверх, когда новый список скользит вниз при нажатии на заголовок?

1 ответ

Похожие вопросы

Новые вопросы

javascript