Question

我在jquery中使用.addClass添加类时遇到问题请帮忙。

这是我的代码：

$(document).ready(function() {
  $('.menu-btn').on('click', function() {
    $(this).addClass('active');
  });
});

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 700, 300italic, 400italic, 600, 600italic, 700italic);

/* font-family: 'Open Sans', sans-serif; */

* margin:0 padding:0 ouline:none box-sizing:border-box=trans($speed:0.3s) -webkit-transition:all $speed ease -moz-transition:all $speed ease transition:all $speed ease body background:#ffffff color:#666666 font-family:'Open Sans',
sans-serif font-weight:300 .whole-con width:auto height:auto margin:0 auto padding:30px 40px overflow:hidded=div ($width:100%,
$bg-color:#f5f5f5,
$color:#666666,
$float:none,
$margin:0 auto) width:$width background:$bg-color color:$color margin:$margin .main-con +div($bg-color:#1ABC9C)=basic-div width:100% height:auto .header +basic-div .menu-con +basic-div text-align:right .menu-btn cursor:pointer background:#009576 +trans rect -moz-transform-origin:50% 0%;
 -webkit-transform-origin:50% 0%;
 transform-origin:50% 0%;
 opacity:0.9 -moz-transform-style:preserve-3D;
 -webkit-transform-style:preserve-3D;
 transform-style:preserve-3D;
 +trans .line2 position:absolute &:hover background:#00886b >rect opacity:1 .active rect opacity:1 .line2 -moz-transform:translateX(-100px) -webkit-transform:translateX(-100px) transform:translateX(-100px) opacity:0 .line1 -moz-transform:translateX(4px) rotate(-40deg) -webkit-transform:translateX(4px) rotate(-40deg) transform:translateX(4px) rotate(-40deg) .line3 -moz-transform:translateX(4px) rotate(37.5deg) -webkit-transform:translateX(4px) rotate(37.5deg) transform:translateX(4px) rotate(37.5deg)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--container-->
<div class="whole-con">
  <!--first main con-->
  <div class="main-con">
    <!--header-->
    <div class="header">
      <!--menu-->
      <div class="menu-con">
        <!--menu btn SVG-->
        <svg version="1.1" id="Menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve" class="menu-btn">
          <rect class="line3" x="9" y="14" fill="#f5f5f5" width="32" height="3" />
          <rect class="line2" x="9" y="24" fill="#f5f5f5" width="32" height="3" />
          <rect class="line1" x="9" y="34" fill="#f5f5f5" width="32" height="3" />
        </svg>
        <!--/menu btn SVG-->
      </div>
      <!--/menu-->
    </div>
    <!--/header-->
  </div>
  <!--/first main con-->
</div>
<!--/container-->

Jquery没有向SVG添加类

0 个答案: