带有旋转箭头的下拉内容（css/js）

Question

我被我的下拉内容卡住了。尝试旋转单击的按钮标题旁边的箭头。第一个内容是默认打开的，所以箭头应该默认打开。

• 当前代码默认不转Content 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();
      }
      $('.fa-sort-down').removeClass('r180');
      let currentContent = target.next('.dropdown-content'); 
      currentContent.slideToggle(600);
      
      $('.dropdown-content').not(currentContent).slideUp(600);
      target.find('.fa-sort-down').toggleClass('r180');

    })
    }} 
    dropdownModule.init();