文章/答案/技术大牛

发布

社区首页 >问答首页 >我怎么才能把这些div动画化？

问我怎么才能把这些div动画化？
EN

Stack Overflow用户

提问于 2022-01-02 14:18:48

回答 2查看 78关注 0票数 -3

我会动画这些div，所以当我点击右箭头得到答案，当点击关闭。我怎么能这么做？我想实际打开这个框，在你点击的时候显示答案，然后关闭它，在点击时只显示问题。截图：https://ibb.co/dc2MZTn

HTML

  <body>
    <div class="accordion">
      <div class="item">
        <p class="number">01</p>
        <p class="text">Where are these chairs assembled?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item open">
        <p class="number">02</p>
        <p class="text">How long do I have to return my chair?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item">
        <p class="number">03</p>
        <p class="text">Do you ship to countries outside the EU?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #343a40;
  line-height: 1;
}

.accordion {
  width: 700px;
  margin: 100px auto;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.item {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  padding: 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 24px;
  row-gap: 32px;
  align-items: center;
}

.number,
.text {
  font-size: 24px;
  font-weight: 500;
  /* color: #087f5b; */
}

.number {
  color: #ced4da;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: #087f5b;
}

.hidden-box {
  grid-column: 2;
  display: none;
}

.hidden-box p {
  line-height: 1.6;
  margin-bottom: 24px;
}

.hidden-box ul {
  color: #868e96;
  margin-left: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* OPEN STATE */
.open {
  border-top: 4px solid #087f5b;
}

.open .hidden-box {
  display: block;
}

.open .number,
.open .text {
  color: #087f5b;
}

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-02 15:28:13

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
  <body>
    <div class="accordion">
      <div class="item">
        <p class="number">01</p>
        <p class="text">Where are these chairs assembled?</p>

添加标签

        <label for="down-arrow1">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        </label>

添加输入类型复选框

        <input type="checkbox" id="down-arrow1">
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item open">
        <p class="number">02</p>
        <p class="text">How long do I have to return my chair?</p>
        <label for="down-arrow2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        </label>
        <input type="checkbox" id="down-arrow2">
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item">
        <p class="number">03</p>
        <p class="text">Do you ship to countries outside the EU?</p>
        <label for="down-arrow3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        </label>
        <input type="checkbox" id="down-arrow3">
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>
    </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #343a40;
  line-height: 1;
}

.accordion {
  width: 700px;
  margin: 100px auto;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.item {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  padding: 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 24px;
  row-gap: 32px;
  align-items: center;
}

.number,
.text {
  font-size: 24px;
  font-weight: 500;
  /* color: #087f5b; */
}

.number {
  color: #ced4da;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: #087f5b;
}

.hidden-box {
  grid-column: 2;
  display: none;
}

.hidden-box p {
  line-height: 1.6;
  margin-bottom: 24px;
}

.hidden-box ul {
  color: #868e96;
  margin-left: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

隐藏复选框

input {
    display: none;
}

/* OPEN STATE */

点击向下箭头=>显示文本

#down-arrow1:checked ~ .hidden-box, #down-arrow2:checked ~ .hidden-box, #down-arrow3:checked ~ .hidden-box {
    display: block;

}

解释：将图像放在标签中，创建一个可被标签单击的复选框，然后隐藏复选框(我对HTML/CSS也不熟悉，所以这可能不是最优化的方法)

票数 0

Stack Overflow用户

发布于 2022-01-02 14:53:00

有很多方法可以这样做，但我现在可以想到的是下面的片段，如果您不想关闭其他项，可以简单地删除函数中的forEach方法

//this only closes others
document.querySelectorAll('.open').forEach(elm =>{
  if(elm !== e.target.parentNode){
    elm.classList.remove('open');  
  }
});

//attaching event listers to all svg.icon
document.querySelectorAll('svg.icon').forEach(elm =>{
  elm.addEventListener('click', openMe);
});

//the main function
function openMe(e){
//toggle the open class of the parent (item itself)
var targ =  e.target.parentNode;
if(targ.tagName == 'svg'){targ = targ.parentNode;}
targ.classList.toggle('open');  

//====================
//This following block is to close every other item
document.querySelectorAll('.open').forEach(elm =>{
  if(elm !== targ){
    elm.classList.remove('open');  
  }
});   
//===========================

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #343a40;
  line-height: 1;
}

.accordion {
  width: 700px;
  margin: 100px auto;

  display: flex;
  flex-direction: column;
  gap: 24px;
}

.item {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  padding: 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 24px;
  row-gap: 32px;
  align-items: center;
}

.number,
.text {
  font-size: 24px;
  font-weight: 500;
  /* color: #087f5b; */
}

.number {
  color: #ced4da;
}

.icon {
  width: 24px;
  height: 24px;
  stroke: #087f5b;
}

.hidden-box {
  grid-column: 2;
  display: none;
}

.hidden-box p {
  line-height: 1.6;
  margin-bottom: 24px;
}

.hidden-box ul {
  color: #868e96;
  margin-left: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* OPEN STATE */
.open {
  border-top: 4px solid #087f5b;
}

.open .hidden-box {
  display: block;
}

.open .number,
.open .text {
  color: #087f5b;
}

<div class="accordion">
      <div class="item">
        <p class="number">01</p>
        <p class="text">Where are these chairs assembled?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item open">
        <p class="number">02</p>
        <p class="text">How long do I have to return my chair?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>

      <div class="item">
        <p class="number">03</p>
        <p class="text">Do you ship to countries outside the EU?</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="icon"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          />
        </svg>
        <div class="hidden-box">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            Accusantium dolor at sequi obcaecati cupiditate. Voluptates
            repellendus cupiditate aperiam! Incidunt amet quo neque.
          </p>
          <ul>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
            <li>
              Quasi accusamus corporis totam tempora suscipit ab obcaecati.
            </li>
            <li>Tempora, et atque officia at consequatur laborum!</li>
            <li>Repudiandae praesentium illo voluptate in, atque enim.</li>
          </ul>
        </div>
      </div>
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70556716

复制

相似问题

问我怎么才能把这些div动画化？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎么才能把这些div动画化？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我怎么才能把这些div动画化？
EN