單擊按鈕時旋轉 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。