Jquery显示/隐藏问题答案

【问题标题】：Trouble with Jquery Show/HideJquery显示/隐藏问题
【发布时间】：2020-11-12 23:17:16
【问题描述】：

我为客户页面制作了一个事件下拉列表。

理想情况下，我希望带有月份的按钮打开事件列表，但由于它目前位于，它全部可见，并且仅在单击按钮时在可见性之间切换。如何在不可见的情况下启动它然后切换？

我遇到的第二个问题是，当单击“信息”按钮时，它下面的事件由于某种原因而宽度缩短了？

Here 是物理站点的链接。

代码：

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%40146x.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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 Eso&nbsp;&nbsp;&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 & 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 & 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 & 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>

【问题讨论】：

标签： jquery toggle show-hide spacing

【解决方案1】：

要使您的列表在第一次加载时隐藏，您只需将其显示隐藏在 CSS 中即可。 slideToggle() 将在您的 JS 代码中为您处理剩下的工作。

所以你只需要在 CSS 中做以下事情：

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

注意：在您的特定情况下无需使用display: flex; 及其属性。一个简单的display: block; 将完成工作，而slideToggle() 会处理它，所以在这种情况下你只需要一个display: none;。

对于您的第二个问题，下一行突然移动背后的问题发生了，因为您没有为行指定任何宽度，因此默认情况下它们会缩小（因为您在 Register 上使用了float CSS 属性这里是父元素（#event-info-link），这会导致它从页面及其框的正常流程中移除，并占据下一行宽度的一部分，一旦它可见就具有自己的宽度），所以解决这个问题，您可以为下面的行指定正确的 width（或者删除 Register Here 父元素上的 float 属性并在其上使用 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%40146x.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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 Eso&nbsp;&nbsp;&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 & 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 & 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 & 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 中使用函数，我只是试图防止类似操作的冗余。

E. G.

$(".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"); 的任何用法，所以我最终从您的代码中删除了它。这可能已在您的代码的其他部分中使用，但在当前的 sn-p 中没有使用它。

这些注释不是必须实现的，但如果您对它们感到满意，编写更具可读性的代码可能是一个好习惯。

【讨论】：

您好，非常感谢您的关注和帮助！对此，我真的非常感激！还要感谢您提供有关代码可读性的提示！