Jquery Show/Hide 有问题

Trouble with Jquery Show/Hide

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

理想情况下，我希望带有月份的按钮可以打开事件列表，但就目前而言，它都是可见的，只有在单击按钮时才会在可见性之间切换。如何在不可见的情况下启动它然后切换？

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

Here 是物理站点的 link。

代码：

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>

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

所以你只需要在CSS中做如下操作：

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

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

对于你的第二个问题，下一行突然移动背后的问题是因为你没有为你的行指定任何宽度所以默认情况下它们会收缩（因为你使用 float CSS 属性 在你的 Register Here 父元素 (#event-info-link) 上，这导致它从页面及其框的正常流中删除并占据部分下一行的宽度，一旦它变得可见就会有自己的宽度），所以要解决这个问题，你可以为下面的行指定正确的 width （或者去掉 float 属性 on 在此处注册 父元素并在其上使用 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>

增加可读性的一些注释

我只是稍微修改了你的代码以避免使用 shorthands 和函数

的冗余

  • 在 CSS 中，我使用了一些 shorthand，如 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"); 的任何用法，所以我最终从您的代码中删除了它。这可能已在您代码的其他部分中使用，但当前代码段中没有使用它。

这些说明不是实施所必需的，但如果您对它们感到满意，那么编写更具可读性的代码可能是一个很好的做法。