【每日一练】229—JS实现一款折叠问答效果

每日一练11个月前更新 admin
1,954 0

第229练的最终效果:

【每日一练】229—JS实现一款折叠问答效果

HTML:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>第229练</title>
    <!– font-awesome –>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css” />
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
      <section class=”questions”>
        <!– questions –>
        <div class=”section-center”>
          <!– single question –>
          <article class=”question”>
            <!– question title –>
            <div class=”question-title”>
              <p>他为什么变成这样?</p>
              <button type=”button” class=”question-btn”>
                <span class=”plus-icon”>
                  <i class=”far fa-plus-square”></i>
                </span>
                <span class=”minus-icon”>
                  <i class=”far fa-minus-square”></i>
                </span>
              </button>
            </div>
            <!– question text –>
            <div class=”question-text”>
              <p>
              批评不会带来改变,但是赞美会,如果我们把一个人说得很糟糕,却希望他变得很好,你觉得这个可能吗?批评不会带来改变,但是赞美会,如果我们把一个人说得很糟糕,却希望他变得很好,你觉得这个可能吗?
              </p>
            </div>
          </article>
          <!– end of single question –>
          <!– single question –>
          <article class=”question”>
            <!– question title –>
            <div class=”question-title”>
              <p>如何接受平庸而平凡的自己?</p>
              <button type=”button” class=”question-btn”>
                <span class=”plus-icon”>
                  <i class=”far fa-plus-square”></i>
                </span>
                <span class=”minus-icon”>
                  <i class=”far fa-minus-square”></i>
                </span>
              </button>
            </div>
            <!– question text –>
            <div class=”question-text”>
              <p>
               学会接受自己的不完美,认真爱自己,别人才会爱你,我们任何时候都要学会当自己,并且要真实的当自己,这其实是一种自信。学会接受自己的不完美,认真爱自己,别人才会爱你,我们任何时候都要学会当自己,并且要真实的当自己,这其实是一种自信。
              </p>
            </div>
          </article>
          <!– end of single question –>
          <!– single question –>
          <article class=”question”>
            <!– question title –>
            <div class=”question-title”>
              <p>我想自学编程,可是我只要高中学历,能够学会吗?</p>
              <!– button –>
              <button type=”button” class=”question-btn”>
                <span class=”plus-icon”>
                  <i class=”far fa-plus-square”></i>
                </span>
                <span class=”minus-icon”>
                  <i class=”far fa-minus-square”></i>
                </span>
              </button>
            </div>
            <!– question text –>
            <div class=”question-text”>
              <p>
                编程是人人可以学会的一项技能,至于学到什么程度,就需要根据自己的目标来,不同的学习目标,学习动力与投入的时间精力也会有所不同。 因此,在开始之前,请先搞清楚自己为啥要学习编程这项技能,毕竟这个世界上有很多技能可以学习,为什么自己非要学习编程?想清楚想明白就行动吧。
              </p>
            </div>
          </article>
          <!– end of single question –>
      </section>
    </main>
    <!– javascript –>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

/*
===============
Fonts
===============
*/
/*
===============
Variables
===============
*/
:root {
    /* dark shades of primary color*/
    –clr-primary-1: hsl(205, 86%, 17%);
    –clr-primary-2: hsl(205, 77%, 27%);
    –clr-primary-3: hsl(205, 72%, 37%);
    –clr-primary-4: hsl(205, 63%, 48%);
    /* primary/main color */
    –clr-primary-5: #49a6e9;
    /* lighter shades of primary color */
    –clr-primary-6: hsl(205, 89%, 70%);
    –clr-primary-7: hsl(205, 90%, 76%);
    –clr-primary-8: hsl(205, 86%, 81%);
    –clr-primary-9: hsl(205, 90%, 88%);
    –clr-primary-10: hsl(205, 100%, 96%);
    /* darkest grey – used for headings */
    –clr-grey-1: hsl(209, 61%, 16%);
    –clr-grey-2: hsl(211, 39%, 23%);
    –clr-grey-3: hsl(209, 34%, 30%);
    –clr-grey-4: hsl(209, 28%, 39%);
    /* grey used for paragraphs */
    –clr-grey-5: hsl(210, 22%, 49%);
    –clr-grey-6: hsl(209, 23%, 60%);
    –clr-grey-7: hsl(211, 27%, 70%);
    –clr-grey-8: hsl(210, 31%, 80%);
    –clr-grey-9: hsl(212, 33%, 89%);
    –clr-grey-10: hsl(210, 36%, 96%);
    –clr-white: #fff;
    –clr-red-dark: hsl(360, 67%, 44%);
    –clr-red-light: hsl(360, 71%, 66%);
    –clr-green-dark: hsl(125, 67%, 44%);
    –clr-green-light: hsl(125, 71%, 66%);
    –clr-gold: #c59d5f;
    –clr-black: #222;
    –ff-primary: “Roboto”, sans-serif;
    –ff-secondary: “Open Sans”, sans-serif;
    –transition: all 0.3s linear;
    –spacing: 0.25rem;
    –radius: 0.5rem;
    –light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    –dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    –max-width: 1170px;
    –fixed-width: 620px;
  }
  /*
  ===============
  Global Styles
  ===============
  */
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #ebebeb;
  }
  p {
    margin-bottom: 1.25rem;
    color: grey;
  }
  .section-center {
    width: 90vw;
    margin: 50px auto 0;
    max-width: 620px;
  }
  .question {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 1.5rem 0 1.5rem;
    margin-bottom: 2rem;
  }
  .question-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: capitalize;
    padding-bottom: 1rem;
  }
  .question-title p {
    letter-spacing: 0.1rem;
    color: yellowgreen;
    font-weight: bolder;
  }
  .question-btn {
    font-size: 1.5rem;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
    color: yellowgreen;
  }
  .question-text {
    padding: 1rem 0 1.5rem 0;
    border-top: 1px solid grey;
  }
  /* hide text */
  .question-text {
    display: none;
  }
  .show-text .question-text {
    display: block;
  }
  .minus-icon {
    display: none;
  }
  .show-text .minus-icon {
    display: inline;
  }
  .show-text .plus-icon {
    display: none;
  }

JS:

const questions = document.querySelectorAll(“.question”);
questions.forEach(function (question) {
  const btn = question.querySelector(“.question-btn”);
  btn.addEventListener(“click”, function () {
    question.classList.toggle(“show-text”);
  });
});

 

© 版权声明

相关文章

暂无评论

暂无评论...