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

2023年3月23日 103次阅读

标题是一个绕口令.这个小提琴的简短描述是,它是一个切换式手风琴,当其中一个div切换时,切换状态会改变颜色.我已经让它工作到如果另一个div切换它将关闭前一个div并在更改切换状态时打开新div.

我遇到的问题是,如果用户想要关闭当前切换而不点击不同的div,它将关闭当前切换但不会将切换状态更改回其原始状态.我目前正在使用它并尝试了多种方法,包括如果容器’是：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();
          });
      });
  });

最佳答案 检查您点击的内容是否已经上课.如果是,请将其删除,如果没有,请添加它.我怀疑你使用hasClass()的问题是你试图检查错误.

哦,我做了一件坏事,并且在点击一个新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();
          });
      });
      }
  });
点赞