单击当前切换时删除类

Question

标题有点绕口令。小提琴的简短描述是它是一种切换样式的手风琴，当div之一被切换时，切换状态会改变颜色。我已经工作到如果another div切换到的位置，它将在改变切换状态的同时关闭该上一个div并打开新的div。

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

小提琴： http://jsfiddle.net/NFTFw/1256/

我想做什么？

如果用户单击current切换的div 或单击另一个div，我希望当前的切换类恢复到其原始状态。因此，从本质上讲，我希望用户选择其中一个选项。

CODE：

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

Answer 2

我建议在函数中传递元素本身

在index.html中执行此操作

<a class = 'classname' onclick = toggle(this)>
   Your Content Here
</a>

之后在script.js中

我的意思是用javascript，我相信您可以轻松将其转换为jquery

function toggle(value){
    if(value.className == 'the predefined value'){
        value.className = value.className + ' Your new class addition'
        // remember there should be a space if you are adding an additional class to the present class, else directly change the classname
    }
    else{
        value.className = 'the predefined value'        
}}

这将在您单击元素时切换您的类名