单击按钮并触发手风琴式转换时，旋转"字体真棒"图标

Question

我是解决方案的一部分，但当实际的"；公开"；按钮。我似乎也不知道把transition属性放在哪里，以便像手风琴一样顺利打开公开内容框，比如这个：

https://www.w3schools.com/howto/howto_js_accordion.asp

但我认为转换不起作用，因为在点击按钮并处理JS以显示框之前，披露框内容被设置为display: none;。

所以我想想要的反应是：点击按钮->FA Chevron旋转90度以向下指向->公开内容框以平滑过渡打开->单击按钮关闭，过程反转。

我已经尝试在我的隐藏内容框JS中嵌套FA旋转，因为我注意到"；"活动"；当点击披露按钮时，在Firefox的检查器中显示状态，但这似乎没有什么区别。旋转图标的代码运行良好，但仅当单击图标本身而不是实际的公开按钮时。

我试图通过在FA图标上添加透明背景并在"披露"按钮后面运行来绕过它，但当然，然后整个背景旋转，而不仅仅是图标，所以这没有成功。

$(".discIconRotate").click(function() {
$(this).toggleClass("iconDown");
})
var acc = document.getElementsByClassName("disclosureBtn");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var disclosureContent = this.nextElementSibling;
disclosureContent.classList.toggle("disclosureBlock");
var disclosureBtn = this.nextElementSibling;
disclosureBtn.classList.toggle("discIconRotate.iconDown");
});
}

.specialContainer {
display: flex;
flex-direction: row;
gap: 0.35em 0.35em;
max-width: 1345px;
flex-wrap: wrap;
align-items: flex-start;
background-color: transparent;
margin: 0.35em auto 0em auto;
padding: 0rem 0rem 0rem 0rem;
}
.specialContainer>div {
background-color: #E7E6E6;
position: relative;
max-width: 1345px;
text-align: center;
outline: 1px solid black;
float: left;
width: calc(50% - 0.25em);
height: auto;
margin: 0em auto 0em auto;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}
.disclosureContainer {
display: block;
width: 100%;
height: auto;
background-color: #E7E6E6;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
.disclosureContent {
font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
color: #646464;
background: #E7E6E6;
display: none;
overflow: hidden;
font-size: 0.6rem;
line-height: 0.8rem;
text-align: justify;
font-weight: 400;
text-justify: inter-word;
margin: 0rem 0rem 0rem 0rem;
padding: 0em 0.55em 0.1em 0.55em;
transition: display 0.2s ease-out;
}
.disclosureBtn {
background-color: transparent;
border: none;
border-collapse: collapse;
width: 100%;
height: 18px;
display: block;
margin: 0em auto 0em auto;
padding: 0em 0em 0em 0em;
cursor: pointer;
text-decoration: none;
transform: translateY(-5px);
}
.disclosureBtnTxt {
font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 400;
display: inline-block;
color: #646464;
padding: 0em 0em 0em 0em;
margin: 0em auto 0em auto;
text-align: center;
text-decoration: none;
font-size: 0.5rem;
line-height: 0.8rem;
letter-spacing: 0.01rem;
cursor: pointer;
}
.fa-chevron-right {
color: #646464;
display: inline-block;
font-size: 0.5rem;
margin: 0rem 0rem 0rem 0rem;
padding: 0rem 0rem 0rem 0rem;
transition: 0.2s all;
}
.discIconRotate {
transform-origin: center;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.discIconRotate.iconDown {
transform-origin: center;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.disclosureBlock {
display: block;
}

<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="specialContainer">
<div class="row">
Offer Container 1
<section class="disclosureContainer">
<a class="disclosureBtn">
<p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
</a>
<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</section>
</div>
<div class="row">
Offer Container 2
<section class="disclosureContainer">
<a class="disclosureBtn">
<p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
</a>
<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>
<div class="row">
Offer Container 3
<section class="disclosureContainer">
<a class="disclosureBtn">
<p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
</a>
<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>
<div class="row">
Offer Container 4
<section class="disclosureContainer">
<a class="disclosureBtn">
<p class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</p>
</a>
<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是我的小提琴：http://jsfiddle.net/astombaugh/7no5xzmr/98/

Answer 1

只需将图标类toggle语句移动到按钮点击处理程序中，并相应地调整CSS即可。(使用CSS遍历DOM通常比使用JavaScript更容易，但两者都可以。(

至于文本转换，我已经实现了一个简单的最大高度/不透明度解决方案，但可能无法适应广泛可变的内容高度。请参阅如何转换高度：0；至高度：自动；使用CSS？了解更多选项。

其他提示：

• 除非您真正支持古老的浏览器，否则您不需要这些供应商前缀。看见https://caniuse.com/css-transitions.
• 您可能不应该使用段落元素来包含按钮。这不是段落内容。我用潜水器代替了它们。看见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p.
• 您将jQuery与原始JavaScript混合在一起。我会用一个或另一个。要么全面利用jQuery，要么(更好地(在您并不真正需要的情况下消除它https://youmightnotneedjquery.com.
• 考虑使用const和let而不是var。它们更现代、更具体。看见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let.
• 如果您只为一次使用创建一个常量或变量，请考虑替换该值以减少代码
• 浮动是一种麻烦且过时的布局技术。它们几乎没有合法的用途，应该避免使用内联块和flexbox策略。(不管怎样，这里似乎没有必要。我已经把它移走了。(

const acc = document.getElementsByClassName("disclosureBtn");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconDown");
// Toggle between hiding and showing the active panel
this.nextElementSibling.classList.toggle("disclosureBlock");
this.nextElementSibling.classList.toggle("discIconRotate.iconDown");
});
}

.specialContainer {
display: flex;
flex-direction: row;
gap: 0.35em 0.35em;
max-width: 1345px;
flex-wrap: wrap;
align-items: flex-start;
background-color: transparent;
margin: 0.35em auto 0em auto;
padding: 0rem 0rem 0rem 0rem;
}
.specialContainer .row {
background-color: #E7E6E6;
position: relative;
max-width: 1345px;
text-align: center;
outline: 1px solid black;
width: calc(50% - 0.25em);
height: auto;
margin: 0em auto 0em auto;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}
.disclosureContainer {
display: block;
width: 100%;
height: auto;
background-color: #E7E6E6;
text-align: center;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
.disclosureContent {
font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
color: #646464;
background: #E7E6E6;
max-height: 0;
opacity: 0;
overflow: hidden;
font-size: 0.6rem;
line-height: 0.8rem;
text-align: justify;
font-weight: 400;
text-justify: inter-word;
margin: 0rem 0rem 0rem 0rem;
padding: 0em 0.55em 0.1em 0.55em;
transition: all 0.2s ease-out;
}
.disclosureBtn {
background-color: transparent;
border: none;
border-collapse: collapse;
width: 100%;
height: 18px;
display: block;
margin: 0em auto 0em auto;
padding: 0em 0em 0em 0em;
cursor: pointer;
text-decoration: none;
transform: translateY(-5px);
}
.disclosureBtnTxt {
font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 400;
display: inline-block;
color: #646464;
padding: 0em 0em 0em 0em;
margin: 0em auto 0em auto;
text-align: center;
text-decoration: none;
font-size: 0.5rem;
line-height: 0.8rem;
letter-spacing: 0.01rem;
cursor: pointer;
}
.fa-chevron-right {
color: #646464;
display: inline-block;
font-size: 0.5rem;
margin: 0rem 0rem 0rem 0rem;
padding: 0rem 0rem 0rem 0rem;
transition: 0.2s all;
}
.discIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconDown .fa {
transform-origin: center;
transform: rotate(90deg);
}
.disclosureBlock {
max-height: 100px;
opacity: 1;
}

<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="specialContainer">
<div class="row">
Offer Container 1
<section class="disclosureContainer">
<a class="disclosureBtn">
<div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
</a>

<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</section>
</div>

<div class="row">
Offer Container 2
<section class="disclosureContainer">
<a class="disclosureBtn">
<div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
</a>

<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>

<div class="row">
Offer Container 3
<section class="disclosureContainer">
<a class="disclosureBtn">
<div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
</a>

<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>

<div class="row">
Offer Container 4
<section class="disclosureContainer">
<a class="disclosureBtn">
<div class="disclosureBtnTxt"><i class="fa fa-chevron-right discIconRotate"></i>&nbsp;Disclosure</div>
</a>

<p class="disclosureContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

一种方法是在显示时将fa chevron right类更改为fa chevron-down。

如果没有，您还可以添加一个执行transform: rotate(90deg);的类来更改图标的位置。