javascript - 单击当前切换时删除类

Question

标题有点绕口令。 fiddle 的简要描述是，它是一种切换式 Accordion ，其中切换状态会在切换其中一个 div 时改变颜色。如果 another div 被切换，我已经让它工作到哪里，它将关闭前一个 div 并在更改切换状态时打开新的 div。

我遇到的问题是，如果用户想关闭当前切换而不单击不同的 div，它将关闭当前切换但不会将切换状态更改回其原始状态。我目前正在使用 this 并尝试了多种方法，包括如果容器 'is: visible' 或 hasClass 然后删除切换类，但是似乎没有任何效果。我还尝试了一个不同的 slideToggle 函数，但当然是将它应用于我找到的切换元素。

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

我想做什么？

如果用户单击当前 切换的 div 或单击另一个 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。

哦，我做了件坏事，在单击新的 div 时没有删除类。我已经修复并更新了 jsfiddle

jsfiddle

js:

$(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();
          });
      });
      }
  });