在jquery中將右箭頭切換為向下箭頭[類似手風琴]

Question

我設計了一種手風琴。 當我單擊某個項目的右箭頭時，例如Area A ，它會切換為我提供Area A中的項目列表，與此同時，右箭頭會下降（例如：▼）。 當我再次單擊它時，列表將隱藏，並且箭頭再次變為右箭頭。 請注意，在Area A ，我將有一個子列表。 有人可以幫助我實現這一目標嗎？

►A區

►B區

►C區

如果我單擊區域A->

▼區域A-項目1-項目2►區域B►區域C

  <ul style="list-style: none;">
    <div ng-repeat="area in areas">     
      <div class="arrow-up" style="float:left;"> &#9658; </div>                                     
          <li> {{area}} </li>
    <div ng-repeat="x in lists">
      <li style="display: none;"> {{x}} </li>               
    </div>
       <div style="display: none;" class="arrow-down">&#9660;</div>
    </div>  
</ul> 

myjs

$(#arrow-up').click(function(){
     $(this).toggleClass("arrow-down");
});

Answer 1

您對此是正確的：

$('.arrow-right').click(function(){    // But isn't it an arrow right??
                                       // And should be a class.
  $(this).toggleClass("arrow-down");
});

您只是想念CSS？

這樣可以：

.arrow-down{
  transform: rotate(90deg);  /* 90 degres rotation */
}