單擊按鈕時旋轉FontAwesome圖示并觸發手風琴轉換-有解無憂

我是解決方案的一部分，但是當單擊實際的“披露”按鈕時，我堅持讓 FA 圖示旋轉。我似乎也無法弄清楚在哪里放置transition屬性以使披露內容框類似于手風琴一樣順利打開，例如這個：

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

但我認為轉換不起作用，因為披露框內容設定為display: none;直到單擊按鈕并且處理 JS 以顯示框。

所以我猜想要的反應是：單擊按鈕 - > FA Chevron 旋轉 90 度指向下方 - > 披露內容框打開并平滑過渡 - > 按鈕被單擊關閉并且程序反轉。

我嘗試將 FA 旋轉嵌套在我的隱藏內容框 JS 中，因為我注意到單擊披露按鈕時 Firefox 檢查器中的“活動”狀態，但這似乎沒有什么區別。旋轉圖示的代碼作業正常，但僅在單擊圖示本身而不是實際的披露按鈕時。

我試圖通過向 FA 圖示添加透明背景并讓它在 Disclosure 按鈕后面運行來欺騙我的方式，但是當然，整個背景會旋轉，而不僅僅是圖示，所以這沒有奏效。

$(".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/

uj5u.com熱心網友回復：

只需將您的圖示類切換陳述句移動到按鈕單擊處理程式中，并相應地調整您的 CSS。（使用 CSS 遍歷 DOM 通常比使用 JavaScript 更容易，但兩者都可以。）

其他提示：

除非您實際上支持古老的瀏覽器，否則您不需要這些供應商前綴。請參閱https://caniuse.com/css-transitions。
您可能不應該使用段落元素來包含您的按鈕。那不是段落內容。我已經用 div 替換了它們。請參閱https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p。
您將 jQuery 與原始 JavaScript 混合在一起。我會使用其中一個。要么全面利用 jQuery，要么（更好地）努力消除它，如果你真的不需要它。請參閱https://youmightnotneedjquery.com。
考慮使用constandlet而不是var. 它們更現代、更具體。請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements /讓。
如果您要創建一個僅用于一次用途的常量或變數，請考慮替換該值以減少代碼。
浮動是一種麻煩且過時的布局技術。它們幾乎沒有合法用途，應該避免使用行內塊和彈性盒策略。

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>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;
  transition: all 0.2s linear;
}

.iconDown .fa {
  transform-origin: center;
  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">
        <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>

uj5u.com熱心網友回復：

一種方法是在顯示時將 fa-chevron-right 類更改為 fa-chevron-down。

如果沒有，您還可以添加一個類transform: rotate(90deg);來更改圖示的位置。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431575.html

標籤：javascript html jQuery css

上一篇：如何基于矩陣創建資料框？

下一篇：Vue方法顯示為未定義