Jquery手風琴的活動狀態

Question

我正在嘗試使用Jquery制作手風琴，並且我只希望打開的選擇具有活動圖標，但是此刻我的功能將其應用於所有選擇。

有人可以看到問題出在哪里嗎？

小提琴：

https://jsfiddle.net/jcuuc3e7/

碼：

 <div id="accordion">
   <div class="accordion-segment">
      <a class="accordion-open" href="#samarbejdspartnere">
          <h3>Samarbejdspartnere</h3>
          <svg class="accordion-icon" width="13" height="8">    
              <path d="M13.6,1.6L12,0L6.8,5.2L1.6,0L0,1.6l6.8,6.8L13.6,1.6z M13.6,1.6"/>
          </svg> 
      </a>
      <div>
          <ul class="accordion-content">
              <li>
                  <a href="#">Stuff</a>
              </li>
              <li>
                  <a href="#">Stuff</a>
              </li>
              <li>
                  <a href="#">Stuff</a>
              </li>
          </ul>
      </div>
  </div>

  <div class="accordion-segment">
      <a class="accordion-open" href="#nyheder">
          <h3>Nyheder</h3>
          <svg class="accordion-icon" width="13" height="8">    
              <path d="M13.6,1.6L12,0L6.8,5.2L1.6,0L0,1.6l6.8,6.8L13.6,1.6z M13.6,1.6"/>
          </svg>
      </a>
      <div class="accordion-content">
          <ul>
              <li>
                  <a href="#">Nyhed 1</a>
              </li>
              <li>
                  <a href="#">Nyhed 2</a>
              </li>
              <li>
                  <a href="#">Nyhed 3</a>
              </li>
              <li>
                  <a href="#">Nyhed 4</a>
              </li>
          </ul>
      </div>
  </div>
</div>

$(function() {
    $("#accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        animate: 250,
        header: "a"
    });
});

$(".accordion-open").click(function() { 
    var accIcon = $(".accordion-icon");

    accIcon.each(function() {
        $(this).removeClass("accordion-icon-active");
    });

    if (!$(this).hasClass("ui-state-active")) {
       accIcon.addClass("accordion-icon-active");
    }    
});


.accordion-segment { 
    width: 400px;
    border-bottom: 1px solid $oslo-gray; 
}

.accordion-open { 
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
    text-align: left;
    font-size: 18px;
    text-transform: uppercase;
}

.accordion-icon {
    width: 13px;
    height: 8px;
    margin-left: auto;
    fill: red;
    transition: .25s ease;
}

.accordion-icon-active { 
    transform: rotate(90deg);
    transition: .25s ease;
}

.accordion-content { 
    margin-top: 10px;
    padding-bottom: 30px;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

Answer 1

通過此accIcon.addClass("accordion-icon-active"); 您正在向所有.accordion-icon項目添加accordion-icon-active類。 但是您想將該類添加到單擊的項目中，因此您應該：

if (!$(this).hasClass("ui-state-active")) { 
    $(this).find('.accordion-icon').addClass("accordion-icon-active"); 
}

另請注意，此代碼：

accIcon.each(function() {
    $(this).removeClass("accordion-icon-active");
});

是相同的：

accIcon.removeClass("accordion-icon-active");

這里不需要迭代，jQuery會處理它。

Answer 2

您正在設置手風琴打開點擊處理程序中頁面上每個圖標的狀態

我認為應該更像這樣

$(".accordion-open").click(function() { 
  $('.accordion-icon').each(function(i, elem) {
    console.log(elem);
    $(elem).removeClass("accordion-icon-active");
  });

  if ($(this).hasClass("ui-state-active")) {
    var accIcon = $(this).find(".accordion-icon");
    accIcon.addClass("accordion-icon-active");
  }
});

現在單擊每個手風琴圖標就可以設置一個圖標的狀態。