Показать/скрыть анимацию

Question

У меня есть одна проблема, и я надеюсь, вы, ребята, могли бы мне помочь. Пожалуйста, проверьте мой jsfiddle>myFiddle

Если вы нажмете кнопку «Подробности», вы увидите больше информации об элементе с простой анимацией. Вы можете закрыть эту информацию, нажав на значок «крест» в левом верхнем углу, и вы увидите закрытие анимации.

My proplem: Когда информация о текущем товаре (контейнере) открыта (и я не закрываю детали с помощью значка «крест»), если я нажимаю на кнопку «Детали» другого элемента, детали первого элемента (контейнера) скрыть (с анимацией).

Если кто-то может помочь, это было бы удивительно

Благодаря

jQuery('.btn.desktop').click(function(){ 
       jQuery('.btn.desktop.active').not(this).removeClass('active'); 
       jQuery(this).addClass('active'); 

       jQuery('.direction-container.active').not(this).removeClass('active'); 
       jQuery(this).addClass('active'); 


       // If button has class active 
       if (jQuery('.btn.desktop').hasClass('active')) { 

        // If button is active add class active to direction container 
        jQuery(this).parent().closest('.direction-container').addClass('active'); 

        // If direction container has class active 
        if (jQuery('.direction-container').hasClass('active')) { 

         // Show details container 
         jQuery('.direction-container.active').find('.details-desktop').fadeIn(500); 


         // Scroll down direction container after 500ms 
         setTimeout(function() {  
          jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500); 
         }, 500); 

         // Show close button 
         setTimeout(function() { 
          jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500); 
         }, 1000); 



         // Hide details container 
         jQuery('.direction-container.active').parent().find('.close-details-desktop').click(function() { 
          jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300); 
          setTimeout(function() {  
           jQuery('.details-desktop').fadeOut(300); 
           jQuery('.close-details-desktop').fadeOut(500); 
          }, 300); 
          setTimeout(function() {  
           jQuery('.direction-container, .btn.desktop').removeClass('active'); 
          }, 500); 
         }); 


        } else { 
        } 

       } else { 
       } 
       return false; 
      }); 

Answer 1

Вы не угасание их.

jQuery('.direction-container.active').parent().find('.close-details-desktop').click(function() { 

Это создает только обработчик щелчка для кнопки активного контейнера. Он не вызывает щелчок. Кроме того, он не должен находиться где-то глубоко внутри другого обработчика кликов, так как он станет активным только после нажатия на .btn.desktop

Ваш код является слишком сложным, что затрудняет вам работу.