如何切换 div 以将其扩大和缩小回原始大小？

Question

因此 html 中有 5 个 div 面板。当其中一个被点击时，它应该会扩大到完整尺寸，再次点击时会缩小。我的 javascript 代码只允许我出于某种原因缩小它。

这是 html 代码：

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>    
</body>

这是 CSS 代码：

html {
     box-sizing: border-box;
     background:#ffc600;
     font-family:'Open Sans';
     font-size: 14px;
     font-weight: 400;
}
 body {
     margin: 0;
}
 *, *:before, *:after {
     box-sizing: inherit;
}
 .panels {
     min-height:100vh;
     overflow: hidden;
     display: flex;
}
 .panel {
     background:#6B0F9C;
     box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
     color:white;
     text-align: center;
     align-items:center;
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */
     transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s;
     font-size: 20px;
     background-size:cover;
     background-position:center;
     flex: 1;
     justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
}
 .panel1 {
     background-image:url(https://source.unsplash.com/8y8DbWwDTz4/1500x1500);
}
 .panel2 {
     background-image:url(https://source.unsplash.com/ZQsKyddXezA/1500x1500);
}
 .panel3 {
     background-image:url(https://source.unsplash.com/cbHtEWXkIdQ/1500x1500);
}
 .panel4 {
     background-image:url(https://source.unsplash.com/FwiNLpZdKVk/1500x1500);
}
 .panel5 {
     background-image:url(https://source.unsplash.com/w8TtcStjyWY/1500x1500);
}
 .panel > * {
     margin:0;
     width: 100%;
     transition:transform 0.5s;
     flex: 1 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .panel > *:first-child {
     transform: translateY(-100%);
}
 .panel.open-active > *:first-child {
     transform: translateY(0);
}
 .panel > *:last-child {
     transform: translateY(100%);
}
 .panel.open-active > *:last-child {
     transform: translateY(0);
}
 .panel p {
     text-transform: uppercase;
     font-family: 'Open Sans', cursive;
     text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
     font-size: 1em;
}
 .panel p:nth-child(2) {
     font-size: 3em;
}
 .panel.open {
     font-size:40px;
     flex: 5;
}

这是我的 Javascript 代码：


    const panel = document.querySelectorAll(".panels div");
    for (let p of panel){
        p.addEventListener('click', function(){
            p.classList.toggle('panels');
        })
    }
});

我不知道怎么了，也许我切换错了class？如果我想切换 css class (.panels > *) 怎么办？ (p.classList.toggle('panels *)?我试过了还是不行，请帮忙谢谢！

Answer 1

这里你应该提到 toggle('panel') 而没有 "s"

document.addEventListener('DOMContentLoaded', ()=>{
    const panel = document.querySelectorAll(".panels div");
    for (let p of panel){
        p.addEventListener('click', function(){
            p.classList.toggle('panel');
        })
    }
});

html {
     box-sizing: border-box;
     background:#ffc600;
     font-family:'Open Sans';
     font-size: 14px;
     font-weight: 400;
}
 body {
     margin: 0;
}
 *, *:before, *:after {
     box-sizing: inherit;
}
 .panels {
     min-height:100vh;
     overflow: hidden;
     display: flex;
}
 .panel {
     background:#6B0F9C;
     box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
     color:white;
     text-align: center;
     align-items:center;
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */
     transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s;
     font-size: 20px;
     background-size:cover;
     background-position:center;
     flex: 1;
     justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
}
 .panel1 {
     background-image:url(https://source.unsplash.com/8y8DbWwDTz4/1500x1500);
}
 .panel2 {
     background-image:url(https://source.unsplash.com/ZQsKyddXezA/1500x1500);
}
 .panel3 {
     background-image:url(https://source.unsplash.com/cbHtEWXkIdQ/1500x1500);
}
 .panel4 {
     background-image:url(https://source.unsplash.com/FwiNLpZdKVk/1500x1500);
}
 .panel5 {
     background-image:url(https://source.unsplash.com/w8TtcStjyWY/1500x1500);
}
 .panel > * {
     margin:0;
     width: 100%;
     transition:transform 0.5s;
     flex: 1 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .panel > *:first-child {
     transform: translateY(-100%);
}
 .panel.open-active > *:first-child {
     transform: translateY(0);
}
 .panel > *:last-child {
     transform: translateY(100%);
}
 .panel.open-active > *:last-child {
     transform: translateY(0);
}
 .panel p {
     text-transform: uppercase;
     font-family: 'Open Sans', cursive;
     text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
     font-size: 1em;
}
 .panel p:nth-child(2) {
     font-size: 3em;
}
 .panel.open {
     font-size:40px;
     flex: 5;
}

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

Answer 2

panels 是div 上的class。我想你反而想切换 open class （也可能 open-active 以获得额外的文本）。

Fiddle: https://jsfiddle.net/b5wa9184/

如何切换 div 以将其扩大和缩小回原始大小？

How to toggle a div to expand and shrink it back to original size?

javascript

event-listener

event-handling

toggle

eventhandler