单击按钮时旋转 Font Awesome 图标并触发手风琴过渡

Question

我是解决方案的一部分，但我坚持在单击实际的“披露”按钮时让 FA 图标旋转。 我似乎也无法弄清楚将transition属性放在哪里才能使披露内容框像手风琴一样顺利打开，例如：

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

但我认为过渡不起作用，因为披露框内容设置为display: none; 直到单击按钮并处理 JS 以显示框。

所以我想期望的反应是：单击按钮 -> FA Chevron 旋转 90 度指向下方 -> 披露内容框打开并平滑过渡 -> 单击按钮关闭，过程相反。

我已经尝试将 FA 旋转嵌套在我隐藏的内容框 JS 中，因为当我点击披露按钮时，我注意到 Firefox 的检查器中的“活动”state，但这似乎没有什么不同。 旋转图标的代码工作正常，但仅当单击图标本身而不是实际的披露按钮时。

我试图通过向 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>

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

Answer 1

只需将您的图标 class 切换语句移动到按钮单击处理程序中，并相应地调整您的 CSS。 （使用 CSS 遍历 DOM 通常比使用 JavaScript 更容易，但两者都可以。）

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

其他提示：

• 除非您实际上支持古老的浏览器，否则您不需要这些供应商前缀。 请参阅https://caniuse.com/css-transitions 。
• 您可能不应该使用段落元素来包含您的按钮。 那不是段落内容。 我已经用 div 替换了它们。 请参阅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 /让。
• 如果您创建的常量或变量仅供一次使用，请考虑替换该值以减少代码。
• 浮动是一种麻烦且过时的布局技术。 它们几乎没有合法用途，应该避免使用 inline-block 和 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 class 更改为 fa-chevron-down。

如果没有，您还可以添加一个 class 进行transform: rotate(90deg); 更改图标的 position。