ハンバーガーのメニューにクラスを追加します。

Question

私は前後に行っています。

モバイルハンバーガーのアニメーションにはhttps://jonsuh.com/hamburgers/を使用しています。

問題は、ハンバーガーをクリックすると、メニューオーバーレイが開きます。ただし、オーバーレイをクリックすると、ハンバーガーをリセットせずに消えます。 Xは残っています。

第2の問題と、私がjQueryで修正しようとしている問題。これは私が初めて使ったので、私にも負担してください。

私はスクロールダウンでメニューをフェードインしましたが、私は 'remove'クラスを 'menu'クラスに注入しようとしていました。だから、私はCSSがnoneを表示するように設定することができます。現時点ではオーバーレイの上にあり、うまく見えません。

$(document).ready(function() { 
 

 
    $(".hamburger").click(function() { 
 
    $(".overlay").fadeToggle(200); 
 
    }); 
 
}); 
 

 
$('.overlay').on('click', function() { 
 
    $(".overlay").fadeToggle(200); 
 

 
    open = false; 
 
}); 
 

 
var $hamburger = $(".hamburger"); 
 
$hamburger.on("click", function(e) { 
 
    $hamburger.toggleClass("is-active"), $(".overlay").fadeToggle(200); 
 
    // Do something else, like open/close menu 
 
}); 
 
var $hamburger = $(".hamburger"); 
 
$hamburger.on("click", function(e) { 
 
    $hamburger.removeclass("is-active"); 
 

 
}); 
 

 
$(".hamburger").click(function() { 
 
    $('#menu').addClass('remove'); 
 
}); 
 

 
$(".hamburger").click(function() { 
 
    $('#menu').removeClass(''); 
 
}); 
 

 
(function($) { 
 
    $(document).ready(function() { 
 
    $(window).scroll(function() { 
 
     if ($(this).scrollTop() > 100) { 
 
     $('#menu').fadeIn(500); 
 
     } else { 
 
     $('#menu').fadeOut(500); 
 
     } 
 
    }); 
 
    }); 
 
})(jQuery);

.hamburger { 
 
    font: inherit; 
 
    display: inline-block; 
 
    overflow: visible; 
 
    margin: 0; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
    transition-timing-function: linear; 
 
    transition-duration: .15s; 
 
    transition-property: opacity, -webkit-filter; 
 
    transition-property: opacity, filter; 
 
    transition-property: opacity, filter, -webkit-filter; 
 
    text-transform: none; 
 
    color: inherit; 
 
    border: 0; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 99999; 
 
} 
 
.hamburger:hover { 
 
    opacity: .7 
 
} 
 
.hamburger-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 24px 
 
} 
 
.hamburger-inner { 
 
    top: 50%; 
 
    display: block; 
 
    margin-top: -2px 
 
} 
 
.hamburger-inner, 
 
.hamburger-inner:after, 
 
.hamburger-inner:before { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 4px; 
 
    transition-timing-function: ease; 
 
    transition-duration: .15s; 
 
    transition-property: -webkit-transform; 
 
    transition-property: transform; 
 
    transition-property: transform, -webkit-transform; 
 
    border-radius: 4px; 
 
    background-color: #000 
 
} 
 
.hamburger-inner:after, 
 
.hamburger-inner:before { 
 
    display: block; 
 
    content: '' 
 
} 
 
.hamburger-inner:before { 
 
    top: -10px 
 
} 
 
.hamburger-inner:after { 
 
    bottom: -10px 
 
} 
 
.menu-overlay { 
 
    position: fixed; 
 
    background-color: transparent; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    transition: all 300ms ease-in-out 
 
} 
 
#menu { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 65px; 
 
    z-index: 4; 
 
    display: none; 
 
    background: red; 
 
} 
 
.menu { 
 
    margin: 0 
 
} 
 
nav { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
    height: auto; 
 
    overflow: hidden; 
 
    background: none; 
 
    float: right 
 
} 
 
nav ul { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    float: right; 
 
    margin: 0 .3rem 0 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    letter-spacing: 3px; 
 
    font-size: .5rem !important; 
 
    font-family: "Montserrat", sans-serif; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    border-top: 3px solid transparent 
 
} 
 
nav ul li:hover { 
 
    border-top: 3px solid #FFC3AF 
 
} 
 
nav ul li a { 
 
    color: #2d2d2d; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    font-weight: 500; 
 
    font-size: 13px; 
 
    display: inline-block; 
 
    display: inline-block; 
 
    padding: 1.2rem 1.5rem; 
 
    text-decoration: none; 
 
    border-bottom: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <div class="hamburger hamburger--elastic" tabindex="0" aria-label="Menu" role="button" aria-controls="navigation"> 
 
    <div class="hamburger-box"> 
 
     <div class="hamburger-inner"></div> 
 
    </div> 
 
    </div> 
 
    <nav class="nav-scroll"> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#testimonials">Testimonials</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="overlay" id="navigation"> 
 
    <div class="wrap"> 
 
    <ul class="wrap-nav"> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#testimonials">Testimonials</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- end overlay - wrap --> 
 
</div> 
 
<!-- end overlay -->

Answer 1

私はそれをチェックアウトし、私は解決策を得ました。

$('.overlay').on('click', function() { 
    $(".overlay").fadeToggle(200); 
    // Add this: 
    $(".hamburger").toggleClass("is-active"); 
    open = false; 
}); 

あなたはちょうどこのクラスをトグルする必要があります：.hamburgerためis-activeあなただけのいくつかの変更を行い、このコードを持っています。もう一つは、エラーは次のとおりです。

$hamburger.removeclass("is-active"); 
//---------------^ Should be C not c. 

上記は誤字です。それを次のように変更してください：

$hamburger.removeClass("is-active");