单击当前切换时删除类答案

【问题标题】：Remove Class when current toggle is clicked单击当前切换时删除类
【发布时间】：2015-09-01 18:05:03
【问题描述】：

标题有点绕口令。对小提琴的简要描述是，它是一种切换风格的手风琴，当切换其中一个 div 时，切换状态会改变颜色。我已经让它工作到如果 another div 被切换，它将关闭以前的 div 并在更改切换状态时打开新的 div。

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

小提琴： 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();
          });
      });
  });

【问题讨论】：

当我点击任何元素时，小提琴中什么都没有发生。
糟糕，是否将其设置为仅在窗口为 600 像素或更小的情况下运行，我已对其进行了更新。

标签： javascript jquery slidetoggle

【解决方案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();
          });
      });
      }
  });

【讨论】：

啊，所以我当时检查了错误的 $this。嗯，谢谢。已接受答案。
是的，我假设您检查的是.column 而不是实际的切换。

【解决方案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'        
}}

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

【讨论】：