Question

所以我尝试用jquery在click事件上旋转汉堡包菜单，我按照教程，我想坚持使用这段代码。点击后没有效果产生，似乎没有添加“打开”类。谢谢

<div class="container">
      <div class="menu-icon cross">
        <span></span>
      </div>
      <div id="menu">
        <ul>
          <li><span>01.</span>Home</li>
          <li><span>02.</span>Work</li>
          <li><span>03.</span>About</li>
          <li><span>04.</span>Contact</li>
        </ul>
      </div>

<!--this is my the css style on the menu-icon -->   
    <style>.menu-icon {
      position: relative;
      margin: 0 auto;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
    .menu-icon span {
      display: block;
      background-color: #212121;
      width: 20px;
      height: 2px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .menu-icon span::before, .menu-icon span::after {
      display: block;
      background-color: #212121;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 2px;
      transform: translateY(-6px);
      transition: transform 0.2s ease-in-out;
    }
    .menu-icon span::after {
      transform: translateY(6px);
    }
    .menu-icon:hover span::before {
      transform: translateY(-8px);
    }
    .menu-icon:hover span::after {
      transform: translateY(8px);
    }

    .cross {
      transition: transform 0.2s;
    }
    .cross span::before, .cross span::after {
      transform-origin: 50% 50%;
    }
    .cross span {
      transition: transform 0.2s, background 0.2s;
    }
    .cross.open {
      transform: rotate(180deg);
    }
    .cross.open span {
      background: transparent;
    }
    .cross.open span:before {
      transform: translateY(0) rotate(45deg);
    }
    .cross.open span:after {
      transform: translateY(0) rotate(-45deg);
    }
    </style>

<!--this is my the jquery -->  

    <script>
$(document).ready(function(e) {
      $('.menu-icon').click(function(e) {
        event.preventDefault();
        $this = $(this);


      });
      $(".menu-icon").click(function(e) {
        $('#menu').slideToggle('1000',"swing", function () {
            // Animation complete.
        });
    $(".menu-icon").click(function () {
        $("#menu").animate({
          opacity:0.7,
        });
    });
      });
    });

    </script>

Answer 1

$(document).ready(function(e) { 
  $(".menu-icon").click(function(e) {
    $('#menu').animate({ // using animate() to combine sliding and fading
      height: "toggle",
      opacity: "toggle"
    }, "slow");

    $(this).toggleClass('open'); // add or remove class
  });
});

查看有效的演示：JSFiddle

addClass / removeClass不能在我的codepen编辑器上运行

1 个答案: