【问题标题】: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-widthpadding 等属性,以防止写出类似的内容:

      #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 中没有使用它。

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

    【讨论】:

    • 您好,非常感谢您的关注和帮助!对此,我真的非常感激!还要感谢您提供有关代码可读性的提示!
    猜你喜欢
    • 2017-11-24
    • 1970-01-01
    • 1970-01-01
    • 2011-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-22
    • 1970-01-01
    相关资源
    最近更新 更多