我使用 CSS 而不是 Fontawesome 來生成箭頭。我認(rèn)為這比加載單獨(dú)的圖標(biāo)庫更有意義。然而，我很難將這些 CSS 箭頭定位到中心，當(dāng)它向上指向時(shí)，它看起來很棒，我認(rèn)為它位于中心或至少靠近中心，但是當(dāng)它向下指向時(shí)，看起來箭頭向底部移動。如果有任何建議，我將不勝感激"use strict";const panelHeader = document.querySelectorAll(".panel-header");panelHeader.forEach(item => { item.addEventListener("click", event => { event.preventDefault(); item.parentElement.classList.toggle("open"); const panel = item.nextElementSibling; panel.style.height = panel.style.height ? null : panel.scrollHeight + "px"; });});:root { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit;}body { margin: 0; padding: 0;}.accordion { max-width: 1200px; margin: 0 auto;}.accordion-container { padding: 15px;}h2 { color: #444; font-size: 1.75rem; position: relative; padding: 0 0 25px 0; margin: 15px 0 20px 0;}h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 5px; background: #f79c31;}.panel-container > .panel + .panel { margin-top: 15px;}.panel { background: #f9f9f9; border: 1px solid #ddd; border-radius: 0.1875em;}.panel-header { background: #564990; border-color: #564990; border-top-left-radius: 0.1875em; border-top-right-radius: 0.1875em; position: relative; transition: background .25s linear;}.panel-header > h4 { margin: 0;}.panel-header > h4 > a { position: relative; display: block; color: #fff; font-size: 1.125rem; text-decoration: none; padding: 15px 50px 15px 15px;}.panel-header:hover { background: #443776;}.panel-body { height: 0; overflow: hidden; transition: 0.3s height 0.2s;}.panel-body-container { padding: 15px;}.arrow { position: absolute; top: 22px; right: 10px; font-size: 1.7rem; border: solid #fff; border-width: 0 4px 4px 0; display: inline-block; padding: 5px; opacity: .5; transform: rotate(-135deg); transition: transform 0.15s linear;}.arrow-up {}.panel.open .arrow { transform: rotate(-315deg); transform-origin: center center;}
5 回答
慕運(yùn)維8079593
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊
根據(jù)您當(dāng)前的設(shè)置，最好的解決方案是 -
更改top動畫類中的值。您還需要將animate值更改為 ，all以便它也以動畫方式顯示頂部值的變化而不跳躍。
.arrow {
...
transition: all 0.15s linear;
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 18px;
}
您也可以將 更改transform-origin為100% center，但這會導(dǎo)致動畫以奇怪的方式旋轉(zhuǎn)。
如果您不想加載字體庫或 SVG 圖標(biāo)，您還可以考慮使用內(nèi)置的 HTML 箭頭并旋轉(zhuǎn)它們。它的行為可能更符合您的預(yù)期 - https://www.toptal.com/designers/htmlarrows/
aluckdog
TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊
首先，您可以避免使用position: absolute解決此類問題的display: flex技巧：
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container>.panel+.panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
display: flex; /* <- Use flexbox */
justify-content: space-between;
align-items: center;
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header>h4 {
margin: 0;
}
.panel-header>h4>a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
/* Don't need position absolute anymore */
margin: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {}
.panel.open .arrow {
margin-top: -5px; /* <- Remove arrow heigth (5px) to stay at the same level */
transform: rotate(-315deg);
transform-origin: center center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">First question?</a>
</h4>
<div class="arrow">
<div class="arrow-up"></div>
</div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">Second question?</a>
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi blanditiis corporis dicta, dolor dolores enim facilis fuga itaque iure iusto molestiae mollitia natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div>
<!-- .panel -->
</div>
<!-- .panel-container -->
</div>
<!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
慕萊塢森
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
嘗試更改類top的屬性，以便它不會被硬編碼。.arrowtop: 50%
然后，添加到您的transform財(cái)產(chǎn)中translate(0, -50%)。
嚕嚕噠
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
使用topCSS 中的專有技術(shù)。
這將設(shè)置旋轉(zhuǎn)箭頭時(shí)箭頭的頂部位置。
這是你的代碼：
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
top: 15px; //Do it!
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">First question?</a>
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">Second question?</a>
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
現(xiàn)場演示：https://codepen.io/marchmello/pen/mdedGra
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
您需要在css 上使用position: absolute和位置，如下所示：top.panel.open .arrow
"use strict";
const panelHeader = document.querySelectorAll(".panel-header");
panelHeader.forEach(item => {
item.addEventListener("click", event => {
event.preventDefault();
item.parentElement.classList.toggle("open");
const panel = item.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + "px";
});
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.accordion {
max-width: 1200px;
margin: 0 auto;
}
.accordion-container {
padding: 15px;
}
h2 {
color: #444;
font-size: 1.75rem;
position: relative;
padding: 0 0 25px 0;
margin: 15px 0 20px 0;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 5px;
background: #f79c31;
}
.panel-container > .panel + .panel {
margin-top: 15px;
}
.panel {
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 0.1875em;
}
.panel-header {
background: #564990;
border-color: #564990;
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
position: relative;
transition: background .25s linear;
}
.panel-header > h4 {
margin: 0;
}
.panel-header > h4 > a {
position: relative;
display: block;
color: #fff;
font-size: 1.125rem;
text-decoration: none;
padding: 15px 50px 15px 15px;
}
.panel-header:hover {
background: #443776;
}
.panel-body {
height: 0;
overflow: hidden;
transition: 0.3s height 0.2s;
}
.panel-body-container {
padding: 15px;
}
.arrow {
position: absolute;
top: 22px;
right: 10px;
font-size: 1.7rem;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
opacity: .5;
transform: rotate(-135deg);
transition: transform 0.15s linear;
}
.arrow-up {
}
.panel.open .arrow {
transform: rotate(-315deg);
transform-origin: center center;
position: absolute;
top: 30%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="accordion-faq.css">
<title>Accordion FAQ</title>
</head>
<body>
<section class="accordion">
<div class="accordion-container">
<header>
<h2>FAQs</h2>
</header>
<div class="panel-container">
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">First question?</a>
</h4>
<div class="arrow"><div class="arrow-up"></div></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
<div class="panel">
<div class="panel-header">
<h4>
<a href="#">Second question?</a>
</h4>
<div class="arrow arrow-up"></div>
</div>
<div class="panel-body">
<div class="panel-body-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium animi blanditiis corporis dicta, dolor dolores
enim facilis fuga itaque iure iusto molestiae mollitia
natus nisi pariatur praesentium quo rerum vel.
</p>
</div>
</div>
</div> <!-- .panel -->
</div> <!-- .panel-container -->
</div> <!-- .accordion-container -->
</section>
<script src="accordion-faq.js"></script>
</body>
</html>
- 5 回答
- 0 關(guān)注
- 201 瀏覽
添加回答
舉報(bào)
0/150
提交
取消