Проблема с отображением / скрытием Jquery

#jquery #toggle #show-hide #spacing

#jquery #переключение #показать-скрыть #интервал

Вопрос:

Я создал выпадающий список событий для страницы клиента.

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

Вторая проблема, с которой я сталкиваюсь, заключается в том, что при нажатии кнопки «информация» событие под ней по какой-то причине укорачивается по ширине?

Вот изображение проблемы.

Вот ссылка на физический сайт.

Код:

 jQuery(function() {
  jQuery(".click-to-reveal").click(function() {
    jQuery(this)
      .children()
      .toggleClass("rotate");
    jQuery(this)
      .next("div.click-to-reveal-block")
      .slideToggle();
  });
});

$(document).ready(function() {
  $("#event-container-two").click(function() {
    $("#event-info-container").toggle();
  });
  $(".second").click(function() {
    $(".reveal-second").toggle();
  });
  $(".third").click(function() {
    $(".reveal-third").toggle();
  });
  $(".fourth").click(function() {
    $(".reveal-fourth").toggle();
  });
  $(".fifth").click(function() {
    $(".reveal-fifth").toggle();
  });
  $(".sixth").click(function() {
    $(".reveal-sixth").toggle();
  });
  $(".seventh").click(function() {
    $(".reveal-seventh").toggle();
  });
  $(".eighth").click(function() {
    $(".reveal-eighth").toggle();
  });
  $(".ninth").click(function() {
    $(".reveal-ninth").toggle();
  });
});

 #content {
  margin-top: 50px;
  width: 100%;
}


/* 
 * Button click
*/

button {
  font-family: 'AGENTUR';
  background: #cd9d2b;
  color: #f6eee1;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 60px;
  padding-right: 60px;
  font-size: 40px;
  border: none;
  cursor: pointer;
}

.click-to-reveal-block {
  margin-top: 20px;
  background-color: #cd9d2b;
  color: #f6eee1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#event-container {
  background-color: #cd9d2b;
  color: #f6eee1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f6eee1;
}

#event-container-one {
  padding-top: 30px;
  padding-left: 50px;
}

#event-container-two {
  border-left: 1px solid #f6eee1;
  padding-top: 25px;
  padding-left: 60px;
  padding-right: 60px;
  cursor: pointer;
}

#event-text {
  background-color: #cd9d2b;
  color: #f6eee1;
  font-size: 25px;
}

#event-info-text {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f6eee1;
  font-size: 25px;
}

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-left: 2px solid #cd9d2b;
  border-right: 2px solid #cd9d2b;
  border-bottom: 2px solid #cd9d2b;
  padding-top: 20px;
  padding-bottom: 60px;
  padding-left: 35px;
  padding-right: 25px;
  font-size: 25px;
}

#event-info-description {
  color: #cd9d2b;
}

#event-info-d {
  font-size: 20px;
}

#event-info-link {
  color: #cd9d2b;
  float: right;
  padding-right: 50px;
  text-decoration: underline;
}

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div id="content">
  <button class="click-to-reveal">DECEMBER
  <img  src="https://static1.squarespace.com/static/546537f6e4b08689b03f27a1/t/5fadab28ff73a225b25eace2/1605217064042/Asset 1@146x.png" width="60" height="60"/>
  </button>
  <div class="click-to-reveal-block" id="flex-block">
    <div class="click-to-reveal-inner-block">

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Seattle Arts amp; Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt, Dec 2, 2020
          </p>
        </div>
        <div id="event-container-two">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Seattle Arts amp; Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt. </p>
        </div>

        <div id="event-info-link">
          <a href="https://lectures.org/event/black-futures/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>
      </div>


      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Sixth and I in partnership with Loyalty Books, Dec 3, 2020
          </p>
        </div>
        <div id="event-container-two" class="second">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-second">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew with moderator Camonghne Felix. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.sixthandi.org/event/kimberly-drew-and-jenna-wortham/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Charis Books in partnership with For Keeps bookstore, Dec 5, 2020
          </p>
        </div>
        <div id="event-container-two" class="third">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-third">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Antonio Johnson and Donovan X. Ramsey, moderated by Theo Tyson. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.charisbooksandmore.com/event/envisioning-black-futures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Brooklyn Academy of Music, Dec 7, 2020
          </p>
        </div>
        <div id="event-container-two" class="fourth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fourth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Kimberly Drew and Jenna Wortham in conversation with Raquel Willis and Naima Green. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.bam.org/blackfutures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Uncle Bobbie’s Bookstore, Dec 8, 2020
          </p>
        </div>
        <div id="event-container-two" class="fifth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fifth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Tiona Nekkia McClodden. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.crowdcast.io/e/blackfutures/register" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> City Arts amp; Lectures with Marcus Books, Dec 9, 2020
          </p>
        </div>
        <div id="event-container-two" class="sixth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-sixth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Ashley Ford. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.cityarts.net/event/jenna-wortham-kimberly-drew/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> California African American Museum and Scripps College with book sales by Esoamp;nbsp;amp;nbsp;amp;nbsp; Won, Dec 10, 2020
          </p>
        </div>
        <div id="event-container-two" class="seventh">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-seventh">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Pierre Davis (No Sesso) among others. </p>
        </div>

        <div id="event-info-link">
          <a href="https://caamuseum.org/programs/talks-and-workshops/in-conversation-black-futures-with-jenna-wortham-kimberly-drew-and-select-contributors" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Source Booksellers (in Detroit), Dec 11, 2020
          </p>
        </div>
        <div id="event-container-two" class="eighth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-eighth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Taylor Aldridge. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.eventbrite.com/e/black-futures-author-event-tickets-128373896781" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Chicago Humanities Festival with book sales by Seminary Co-op, Dec 14, 2020
          </p>
        </div>
        <div id="event-container-two" class="ninth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-ninth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Eve L. Ewing. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.chicagohumanities.org/events/black-futures-kimberly-drew-jenna-wortham" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

    </div>
  </div>
</div>

Ответ №1:

Чтобы сделать ваш список скрытым при первой загрузке, вам просто нужно сделать его отображение скрытым в CSS. slideToggle() будет ли в вашем JS-коде обрабатывать остальную часть работы за вас.

Итак, вам нужно только выполнить следующее в CSS:

 .click-to-reveal-block {
  /* rest of code */
  display: none;
}

ПРИМЕЧАНИЕ: нет необходимости использовать display: flex; и его свойства в вашем конкретном случае. Простой display: block; выполнит работу, которая slideToggle() позаботится об этом, поэтому display: none; в этом случае вам нужен только a.

Что касается вашей второй проблемы, проблема, связанная с внезапным перемещением следующей строки, возникла из-за того, что вы не указали какую-либо ширину для своих строк, поэтому по умолчанию они будут уменьшаться (потому что вы использовали float свойство CSS в своем родительском элементе Register Here ( #event-info-link ) , что приводит к его удалению из обычного потока страницыи его поле и занимает часть ширины следующей строки, с его собственной шириной, как только она становится видимой), поэтому, чтобы исправить это, вы можете указать правильное width значение для строк, как показано ниже (или, альтернативно, избавиться от float свойства родительского элемента Register Here и использовать text-align: right; его вместо этого, что является законным, но яне буду менять его в моей попытке, и я буду придерживаться вашего текущего кода):

 #event-container {
  width: 100%;
  /* rest of code */
}

Учитывая все вышесказанное, ваш окончательный код будет выглядеть примерно так:

Показать фрагмент кода

 function onClick(clickElement, toggleElement) {
  $(clickElement).click(function() {
    $(toggleElement).toggle();
  });
}

$(document).ready(function() {
  $(".click-to-reveal").click(function() {
    $(this)
      .next("div.click-to-reveal-block")
      .slideToggle();
  });

  onClick("#event-container-two", "#event-info-container");
  onClick(".second", ".reveal-second");
  onClick(".third", ".reveal-third");
  onClick(".fourth", ".reveal-fourth");
  onClick(".fifth", ".reveal-fifth");
  onClick(".sixth", ".reveal-sixth");
  onClick(".seventh", ".reveal-seventh");
  onClick(".eighth", ".reveal-eighth");
  onClick(".ninth", ".reveal-ninth");
});

 #content {
  margin-top: 50px;
  width: 100%;
}


/* 
 * Button click
*/

button {
  font-family: 'AGENTUR';
  background: #cd9d2b;
  color: #f6eee1;
  padding: 16px 60px;
  font-size: 40px;
  border: none;
  cursor: pointer;
}

.click-to-reveal-block {
  margin-top: 20px;
  background-color: #cd9d2b;
  color: #f6eee1;
  display: none;
}

#event-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f6eee1;
}

#event-container-one {
  padding-top: 30px;
  padding-left: 50px;
}

#event-container-two {
  border-left: 1px solid #f6eee1;
  padding: 25px 60px 0;
  cursor: pointer;
}

#event-text {
  background-color: #cd9d2b;
  color: #f6eee1;
  font-size: 25px;
}

#event-info-text {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f6eee1;
  font-size: 25px;
}

#event-info-container {
  display: none;
  background-color: #f6eee1;
  border-width: 0 2px 2px;
  border-color: #cd9d2b;
  border-style: solid;
  padding: 20px 25px 60px 35px;
  font-size: 25px;
}

#event-info-description {
  color: #cd9d2b;
}

#event-info-d {
  font-size: 20px;
}

#event-info-link {
  color: #cd9d2b;
  float: right;
  padding-right: 50px;
  text-decoration: underline;
}

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div id="content">
  <button class="click-to-reveal">DECEMBER
  <img  src="https://static1.squarespace.com/static/546537f6e4b08689b03f27a1/t/5fadab28ff73a225b25eace2/1605217064042/Asset 1@146x.png" width="60" height="60"/>
  </button>
  <div class="click-to-reveal-block" id="flex-block">
    <div class="click-to-reveal-inner-block">

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Seattle Arts amp; Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt, Dec 2, 2020
          </p>
        </div>
        <div id="event-container-two">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Seattle Arts amp; Lectures in partnership with Estelita’s Library Jenna and Kimberly in conversation with King Britt. </p>
        </div>

        <div id="event-info-link">
          <a href="https://lectures.org/event/black-futures/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>
      </div>


      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Sixth and I in partnership with Loyalty Books, Dec 3, 2020
          </p>
        </div>
        <div id="event-container-two" class="second">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-second">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew with moderator Camonghne Felix. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.sixthandi.org/event/kimberly-drew-and-jenna-wortham/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Charis Books in partnership with For Keeps bookstore, Dec 5, 2020
          </p>
        </div>
        <div id="event-container-two" class="third">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-third">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Antonio Johnson and Donovan X. Ramsey, moderated by Theo Tyson. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.charisbooksandmore.com/event/envisioning-black-futures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Brooklyn Academy of Music, Dec 7, 2020
          </p>
        </div>
        <div id="event-container-two" class="fourth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fourth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Kimberly Drew and Jenna Wortham in conversation with Raquel Willis and Naima Green. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.bam.org/blackfutures" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Uncle Bobbie’s Bookstore, Dec 8, 2020
          </p>
        </div>
        <div id="event-container-two" class="fifth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-fifth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Tiona Nekkia McClodden. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.crowdcast.io/e/blackfutures/register" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> City Arts amp; Lectures with Marcus Books, Dec 9, 2020
          </p>
        </div>
        <div id="event-container-two" class="sixth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-sixth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Ashley Ford. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.cityarts.net/event/jenna-wortham-kimberly-drew/" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> California African American Museum and Scripps College with book sales by Esoamp;nbsp;amp;nbsp;amp;nbsp; Won, Dec 10, 2020
          </p>
        </div>
        <div id="event-container-two" class="seventh">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-seventh">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Pierre Davis (No Sesso) among others. </p>
        </div>

        <div id="event-info-link">
          <a href="https://caamuseum.org/programs/talks-and-workshops/in-conversation-black-futures-with-jenna-wortham-kimberly-drew-and-select-contributors" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Source Booksellers (in Detroit), Dec 11, 2020
          </p>
        </div>
        <div id="event-container-two" class="eighth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-eighth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Taylor Aldridge. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.eventbrite.com/e/black-futures-author-event-tickets-128373896781" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

      <div id="event-container">
        <div id="event-container-one">
          <p id="event-text"> Chicago Humanities Festival with book sales by Seminary Co-op, Dec 14, 2020
          </p>
        </div>
        <div id="event-container-two" class="ninth">
          <p id="event-info-text"> info
          </p>
        </div>

      </div>

      <div id="event-info-container" class="reveal-ninth">
        <div id="event-info-description" class="info-reveal">
          <p id="event-info-d"> Jenna Wortham amp; Kimberly Drew in conversation with Eve L. Ewing. </p>
        </div>

        <div id="event-info-link">
          <a href="https://www.chicagohumanities.org/events/black-futures-kimberly-drew-jenna-wortham" target="_blank">
            <p id="event-info-d"> Register Here </p>
          </a>
        </div>

      </div>

    </div>
  </div>
</div>

Некоторые примечания для повышения удобочитаемости

Я просто немного модифицирую ваш код, чтобы избежать избыточности с использованием сокращений и функций

В CSS я использовал некоторые сокращенные свойства, такие как border-width , padding , и т. Д., Чтобы предотвратить написание чего-то вроде:

 #event-info-container {
  display: none;
  background-color: #f6eee1;
  border-left: 2px solid #cd9d2b;
  border-right: 2px solid #cd9d2b;
  border-bottom: 2px solid #cd9d2b;
  padding-top: 20px;
  padding-bottom: 60px;
  padding-left: 35px;
  padding-right: 25px;
  font-size: 25px;
}

Таким образом, его можно сократить и, ~~возможно, он не будет~~ более читаемым 😄, например:

 #event-info-container {
  display: none;
  background-color: #f6eee1;
  border-width: 0 2px 2px;
  border-color: #cd9d2b;
  border-style: solid;
  padding: 20px 25px 60px 35px;
  font-size: 25px;
}

С помощью функций в JS я просто пытался предотвратить избыточность при подобных действиях.

Например

 $(".second").click(function() {
   $(".reveal-second").toggle();
});
$(".third").click(function() {
   $(".reveal-third").toggle();
});
// rest of similar actions

К чему-то вроде этого:

 function onClick(clickElement, toggleElement) {
  $(clickElement).click(function() {
     $(toggleElement).toggle();
  });
}

// ----
onClick("#event-container-two", "#event-info-container");
onClick(".second", ".reveal-second");
onClick(".third", ".reveal-third");
// rest of code

Что может предотвратить избыточность и упростить чтение.

$ и jQuery , по сути, одно и то же, но для предотвращения конфликтов с другими библиотеками иногда мы можем использовать jQuery вместо $ , но если у вас нет такой библиотеки, было бы лучше придерживаться одной из них (я лично предпочитаю $ , потому что это менее раздражает). Поэтому старайтесь не использовать их вместе, чтобы предотвратить несоответствие в вашей кодовой базе.
Функция IIFE ( jQuery(function() {...}) ) не требуется для прикрепления события onclick к вашему элементу ( '.click-to-reveal' ), и это можно сделать, как и другие на $(document).ready(...) этапе.
Я не нашел никакого использования для jQuery(this).children().toggleClass("rotate"); , поэтому в итоге я удалил его из вашего кода. Возможно, это использовалось в других частях вашего кода, но в этом текущем фрагменте оно не используется.

Эти примечания не являются необходимыми для реализации, но если они вас устраивают, может быть хорошей практикой написать более читаемый код.

Вопрос:

Ответ №1:

Некоторые примечания для повышения удобочитаемости

Комментарии:

Вам также может понравиться

Развертывание Django с помощью Daphne

как сохранить логин при автоматизации веб-сайта

Является ли проектирование ленивым, нетерпеливым или явным в entity framework?