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

每日一练1年前 (2023)更新 admin

2,811 0 10

第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”);

});

});

# 每日一练 # 练习项目 # 每日一练

© 版权声明

文章版权归作者所有，未经允许请勿转载。

相关文章

【每日一练】208—体重转换器的实现

admin

1,676 1

【每日一练】175—CSS实现博客文章列表卡片式效果

admin

2,018 10

【每日一练】244—JS实现一款旋转图片库效果

admin

3,927 4

【每日一练】85- CSS分层文本阴影效果生成器的实现

admin

2,675 5

【每日一练】179— CSS实现一款文章卡片式列表效果

admin

2,163 1

【每日一练】249—JS实现打字效果

admin

4,475 10

暂无评论

暂无评论...

【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】

友链申请免责声明广告合作关于我们

Copyright © 2024 【web前端开发】公号平台官网平台