Блог

Я застрял с моим выпадающим содержимым. Попытка повернуть стрелки рядом с заголовками нажатых кнопок. Первое содержимое открывается по умолчанию, так что стрелка должна быть повернута туда по умолчанию.

• Текущий код по умолчанию не включает стрелку содержимого 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);
  }
 

В принципе, когда вы нажимаете на раскрывающийся список, это может быть щелчок по тегу, и вам сначала нужно найти цель.

Измените свой 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();