addClass/removeClass無法在我的codepen編輯器上工作

所以我嘗試使用jquery點擊事件來旋轉漢堡包菜單，我跟隨了一個教程，並且我希望堅持使用此代碼。當我點擊並且「打開」類似乎不被添加時，沒有任何效果。謝謝addClass/removeClass無法在我的codepen編輯器上工作

<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>

來源

2016-01-11 Kellig

$(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

來源

2016-01-11 10:59:58

感謝很多人，你是好...我知道，我忘了把jQuery代碼到爲我改變，從而很多時候，在Css3，toggleClass，addClass和removeClass之間。 – Kellig

@凱利格歡迎您。如果它完全解決了你的問題，你可以接受答案:) –

addClass/removeClass無法在我的codepen編輯器上工作

回答

相關問題