带旋转箭头的下拉内容（CSS/JS）

Question

我被我的下拉内容卡住了。试图旋转单击按钮标题旁边的箭头。第一个内容是默认打开的，这样arrow应该默认在那里转动。

>

当前代码默认情况下不转动内容1箭头，并且

点击旋转所有箭头，因为我不知道如何在js中正确引用当前图标。

任何建议都是非常欢迎的。

  let dropdownModule = { 
   init: function(){
    this.cacheDom();
    this.bindEvents();
   },
   cacheDom: function(){
    this.$el = $('.dropdown-container');
    this.$dropdownBox = this.$el.find('.dropdown-box');
    this.$dropdownContent = this.$el.find('.dropdown-content');
    
   },
   bindEvents:function(){
    this.$dropdownBox.on('click', function(){
      
      let currentContent = $(this).next('.dropdown-content'); 
      currentContent.slideToggle(600);
      
      $('.dropdown-content').not(currentContent).slideUp(600);
      $('.fa-sort-down').toggleClass('r180');

    })
    }} 
    dropdownModule.init();
    
   
    
    

        
       <div class="dropdown-container">
       <div class="dropdown-box">Button Title 1<i class="fas fa-sort-down"></i>
       </div>
       <div style="display: block;" class="dropdown-content">
       Content 1
       </div>
       </div>
    
       <div class="dropdown-container">
       <div class="dropdown-box">Button Title 2<i class="fas fa-sort-down"></i>
       </div>
       <div class="dropdown-content">
       Content 2
       </div>
       </div>
        
        

     .fa-sort-down {
       transition: all 0.5s ease;
     }
     .r180 {
       transform: rotate(180deg);
  }

Answer 1

基本上，当您点击下拉列表时，可能是被点击的标记，您需要首先找到目标。

将您的js更改为：

let dropdownModule = { 
   init: function(){
    this.cacheDom();
    this.bindEvents();
   },
   cacheDom: function(){
    this.$el = $('.dropdown-container');
    this.$dropdownBox = this.$el.find('.dropdown-box');
    this.$dropdownContent = this.$el.find('.dropdown-content');
    
   },
   bindEvents:function(){
    this.$dropdownBox.on('click', function(e){
      let target = $(e.target);
      if(!$(e.target).hasClass("dropdown-box")){
        target = $(e.target).parent();
      }
      
      let currentContent = target.next('.dropdown-content'); 
      currentContent.slideToggle(600);
      
      $('.dropdown-content').not(currentContent).slideUp(600);
      target.find('.fa-sort-down').toggleClass('r180');

    })
    }} 
    dropdownModule.init();