Удалить класс, когда нажата кнопка переключения тока.

Question

Название немного скручивается. Краткое описание скрипки состоит в том, что это гармонический стиль аккордеона, в котором состояние переключения изменяет цвет, когда один из divs переключается. У меня есть работа над тем, где, если еще один div переключается, он закрывает предыдущий div и открывает новый div при изменении состояния переключения.

Проблема, с которой я столкнулся, заключается в том, что пользователь хочет закрыть текущий переключатель, не нажимая другой div, он закрывает текущий переключатель, но не переключает состояние переключения обратно в исходное состояние. В настоящее время я использую и попробовал несколько вещей, включая контейнер 'is: visible' или hasClass, а затем удалить класс переключения, но ничего не работает. Я также пробовал другую функцию slideToggle, но, конечно, применил ее к переключаемому элементу, который я нашел.

Fiddle:http://jsfiddle.net/NFTFw/1256/

То, что я пытаюсь сделать?

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

КОД:

$(document).ready(function() { 
     $('.column').each(function (index) { 
      $(this).delay(750 * index).fadeIn(1500); 
     }); 
     $('.column').hide(); 
     $('.body').hide(); 
     $('.column').each(function() { 
      var $toggle = $(this); 
      $('.toggle', $toggle).click(function() { 
       $(".toggle").removeClass("toggle-d"); 
       $(this).addClass('toggle-d'); 
       $body = $('.body', $toggle); 
       $body.slideToggle(); 
       $('.body').not($body).hide(); 
      }); 
     }); 
    }); 

Answer 1

Проверьте, чтобы увидеть, если вещь, которую вы щелкаете уже имеет класс. Если это так, удалите его, если нет, добавьте его. Я подозреваю, что проблема, с которой вы столкнулись с hasClass(), заключается в том, что вы пытались проверить неточно this.

Oooh Я сделал плохое дело и не удалял класс, когда был нажат новый div. Я исправил, что и обновил jsfiddle

jsfiddle

ЯША:

$(document).ready(function() { 
     $('.column').each(function (index) { 
      $(this).delay(750 * index).fadeIn(1500); 
     }); 
     $('.column').hide(); 
     var width = $(window).width(); 
     if (width <= 600) { 
     $('.body').hide(); 
     $('.column').each(function() { 
      var $toggle = $(this); 
      $('.toggle', $toggle).click(function() { 
       if($(this).hasClass('toggle-d')){ 
       $(this).removeClass("toggle-d"); 
       } 
       else{ 
       $('.toggle').removeClass('toggle-d'); 
       $(this).addClass('toggle-d'); 
       } 
       $body = $('.body', $toggle); 
       $body.slideToggle(); 
       $('.body').not($body).hide(); 
      }); 
     }); 
     } 
    });