单击当前切换时删除 Class

Question

标题有点绕口令。对 fiddle 的简要描述是，它是一种切换式手风琴，当 div 之一被切换时，切换状态会改变颜色。如果 another div 被切换，它将关闭之前的 div 并在更改切换时打开新的 div状态。

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

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

我想做什么？

我希望当前切换 class 在用户单击当前切换 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

检查您点击的内容是否已经有 class。如果是，删除它，如果不是，添加它。我怀疑您在使用 hasClass() 时遇到的问题是您试图检查错误的 this.

糟糕，我做了件坏事，在单击新的 div 时没有删除 class。我已经修复并更新了 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'        
}}

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

单击当前切换时删除 Class

Remove Class when current toggle is clicked

javascript

jquery

slidetoggle