带旋转箭头的下拉内容 (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();

带旋转箭头的下拉内容 (css/js)

Dropdown content with rotating arrow (css/js)

javascript

css

rotation

dropdown