Question

我正在尝试进行切换开关而我不能使用toggleClass因为＃bar1我正在使用SVG。使用SVG，我读到我必须使用Attributes而不是addClass（）。我的想法是单击一个div来添加一个新类并删除当前的类。第一次单击代码有效，但我无法通过第二次单击恢复到原始类。关于我可能做错什么的任何建议？

$(".hamburger-container").click(function() {
  $("#bar1").attr('class', 'bar1');
  $(this).addClass('toggle');
  $(this).removeClass('hamburger-container');
});

$(".toggle").click(function() {
  $("#bar1").removeAttr('class', 'bar1');
  $(this).addClass('hamburger-container');
  $(this).removeClass('toggle');
});

HTML

     <div class ="pull-right hamburger-container">

               <svg enable-background="new 0 0 32 32" height="32px" id="hamburger" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Menu"><path class ="bar" id="bar1" d="M1,7h30c0.552,0,1-0.448,1-1c0-0.552-0.448-1-1-1H1C0.448,5,0,5.448,0,6C0,6.552,0.448,7,1,7z" fill="#121313"/><path class="bar" id="bar2" d="M31,15H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,15.448,31.552,15,31,15z" fill="#121313"/><path class="bar" id="bar3" d="M31,25H1c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h30c0.552,0,1-0.448,1-1C32,25.448,31.552,25,31,25z" fill="#121313"/></g><g/><g/><g/><g/><g/><g/></svg>
            </div>

CSS

      .toggle {
     width: 50px;
     height: 30px;
     display: inline-block;
    position: relative;
    z-index: 1200;
    cursor:pointer;
    margin-right: 20px;
     margin-top: 10px;
     }

   .hamburger-container {
    width: 50px;
    height: 30px;
    display: inline-block;
     position: relative;
    z-index: 1020;
     cursor:pointer;
      margin-right: 20px;
     margin-top: 10px;
     }

Answer 1

将事件处理程序锚定到包装的某个元素。

请注意，您删除了它所锚定的类，一旦发生这种情况，就会删除click事件处理程序的锚点。

示例：使用锚定到pull-right类

的单个处理程序

$(".pull-right").on("click", function() {
  var me = $(this);
  if (me.hasClass('hamburger-container')) {
    $("#bar1").attr('class', 'bar1');
    me.addClass('toggle');
    me.removeClass('hamburger-container');
  } else {
    $("#bar1").removeAttr('class', 'bar1');
    me.addClass('hamburger-container');
    me.removeClass('toggle');
  }
});

注意，使用最接近的静态＆＃34;包装＆＃34; ".hamburger-container"和".toggle"引用的元素（如果可能的话，不是正文或文档）;比如div

简单的CSS：

.hamburger-container,
.toggle {
  width: 50px;
  height: 30px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 20px;
  margin-top: 10px;
}
.toggle {
  z-index: 1200;
}
.hamburger-container {
  z-index: 1020;
}

在此处测试：注意打开控制台以查看日志https://jsfiddle.net/MarkSchultheiss/tp5y8j1m/

Answer 2

假设你有一些标记开头像：

<div class="hamburger-container">stuff</div>

我认为如果您只是添加一个类来标识您的元素（例如“toggle-element”），您可以将JavaScript简化为单击事件处理程序：

<div class="toggle-element hamburger-container toggle">stuff</div>

现在通过toggle-element：

绑定到该元素

$(".toggle-element").click(function() {
    var $self = $(this);
    if ($self.attr('class') !== undefined) {
        $self.removeAttr('class');
    } else {
        $self.attr('class', 'bar1');
    }
    $self.toggleClass('toggle hamburger-container');
});

通过使用Jquery添加和删除Class来切换开关

2 个答案: