Question

标题有点绕口令。这个小提琴的简短描述是，它是一个切换式手风琴，当其中一个div切换时，切换状态会改变颜色。如果另一个 div被切换，它会关闭前一个div并在更改切换状态时打开新div。

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

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

我想做什么？

如果用户点击当前切换的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'        
}}

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

单击当前切换时删除Class

2 个答案: