Jqueryこれをクリックしてクラスを切り替える

Question

親アイテムまたは子アイテムのいずれかにクリックイベントがあるときにクラスを切り替えることができません。バー全体またはアイコンだけをクリックできるナビゲーションメニューです。

現在の状況：あなたが赤のブロックをクリックすると(according to the fiddle) 、クラスis-activeは.hamburger-menuクラスに切り替えられます。アイコンをCSS経由で遷移させる。 しかし、ハンバーガーアイコンをクリックすると、クラスは切り替わりません。

#menuContainerまたは.hamburger-menu divのクリックイベントが発生した場合、クラスis-activeはどのように切り替えることができますか？

jQuery(function($) { 
 
    $(document).ready(function() { 
 
    $("#menuContainer, .hamburger-menu").click(function() { 
 
     $(".hamburger-menu").toggleClass("is-active"); 
 
    }); 
 
    }); 
 
});

.menu_container { 
 
    display: block; 
 
    position: absolute; 
 
    left: 45%; 
 
    top: 45%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    cursor: pointer; 
 
} 
 

 
.menu_container .menu-active { 
 
    background-color: blue; 
 
} 
 

 
.hamburger-menu { 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 45%; 
 
    margin: 0 auto; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu:hover { 
 
    cursor: pointer; 
 
} 
 

 
.hamburger-menu span { 
 
    display: block; 
 
    width: 40px; 
 
    max-width: 100%; 
 
    height: 3px; 
 
    background-color: #414042; 
 
    margin-bottom: 5px; 
 
    border-radius: 5px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(2) { 
 
    display: none; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(1) { 
 
    -webkit-transform: translateY(4.5px) rotate(45deg); 
 
    -ms-transform: translateY(4.5px) rotate(45deg); 
 
    -o-transform: translateY(4.5px) rotate(45deg); 
 
    transform: translateY(4.5px) rotate(45deg); 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(3) { 
 
    -webkit-transform: translateY(-4.5px) rotate(-45deg); 
 
    -ms-transform: translateY(-4.5px) rotate(-45deg); 
 
    -o-transform: translateY(-4.5px) rotate(-45deg); 
 
    transform: translateY(-4.5px) rotate(-45deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menuContainer" class="menu-trigger menu_container"> 
 
    <div class="hamburger-menu"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>

Answer 1

あなたは二つの要素、#menuContainerと.hamburger-menuにクリックイベントハンドラを追加しましたので、問題があります。後者は前者の子であるため、クリックするとハンドラが2回発生します。これは、クラスがオンに切り替えられた後すぐに再びオフになることを意味します（逆も同様）。

この問題を解決するには、イベントでstopPropagation()に電話してください。これにより、イベントがDOMをバブリングして2回処理されなくなります。

jQuery(function($) { // Note you only need one document.ready handler here 
 
    $("#menuContainer, .hamburger-menu").click(function(e) { 
 
    e.stopPropagation(); 
 
    $(".hamburger-menu").toggleClass("is-active"); 
 
    }); 
 
});

.menu_container { 
 
    display: block; 
 
    position: absolute; 
 
    left: 45%; 
 
    top: 45%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    cursor: pointer; 
 
} 
 

 
.menu_container .menu-active { 
 
    background-color: blue; 
 
} 
 

 
.hamburger-menu { 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 45%; 
 
    margin: 0 auto; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu:hover { 
 
    cursor: pointer; 
 
} 
 

 
.hamburger-menu span { 
 
    display: block; 
 
    width: 40px; 
 
    max-width: 100%; 
 
    height: 3px; 
 
    background-color: #414042; 
 
    margin-bottom: 5px; 
 
    border-radius: 5px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(2) { 
 
    display: none; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(1) { 
 
    -webkit-transform: translateY(4.5px) rotate(45deg); 
 
    -ms-transform: translateY(4.5px) rotate(45deg); 
 
    -o-transform: translateY(4.5px) rotate(45deg); 
 
    transform: translateY(4.5px) rotate(45deg); 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(3) { 
 
    -webkit-transform: translateY(-4.5px) rotate(-45deg); 
 
    -ms-transform: translateY(-4.5px) rotate(-45deg); 
 
    -o-transform: translateY(-4.5px) rotate(-45deg); 
 
    transform: translateY(-4.5px) rotate(-45deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menuContainer" class="menu-trigger menu_container"> 
 
    <div class="hamburger-menu"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>

Answer 2

問題は、クラスが二回切り替えると、それは働いていないようにそれが見えるようにさせるハンバーガーメニューをクリックしたときにイベントが親にまで伝播していることです。これを修正するには、e.stopPropagation();をクリック機能に追加する必要があります。

jQuery(function($) { 
 
    $(document).ready(function() { 
 
    $("#menuContainer, .hamburger-menu").click(function(e) { 
 
     $(".hamburger-menu").toggleClass("is-active"); 
 
     e.stopPropagation(); 
 
    }); 
 
    }); 
 
});

.menu_container { 
 
    display: block; 
 
    position: absolute; 
 
    left: 45%; 
 
    top: 45%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    cursor: pointer; 
 
} 
 

 
.menu_container .menu-active { 
 
    background-color: blue; 
 
} 
 

 
.hamburger-menu { 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 45%; 
 
    margin: 0 auto; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu:hover { 
 
    cursor: pointer; 
 
} 
 

 
.hamburger-menu span { 
 
    display: block; 
 
    width: 40px; 
 
    max-width: 100%; 
 
    height: 3px; 
 
    background-color: #414042; 
 
    margin-bottom: 5px; 
 
    border-radius: 5px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(2) { 
 
    display: none; 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(1) { 
 
    -webkit-transform: translateY(4.5px) rotate(45deg); 
 
    -ms-transform: translateY(4.5px) rotate(45deg); 
 
    -o-transform: translateY(4.5px) rotate(45deg); 
 
    transform: translateY(4.5px) rotate(45deg); 
 
} 
 

 
.hamburger-menu.is-active span:nth-child(3) { 
 
    -webkit-transform: translateY(-4.5px) rotate(-45deg); 
 
    -ms-transform: translateY(-4.5px) rotate(-45deg); 
 
    -o-transform: translateY(-4.5px) rotate(-45deg); 
 
    transform: translateY(-4.5px) rotate(-45deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menuContainer" class="menu-trigger menu_container"> 
 
    <div class="hamburger-menu"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    </div> 
 
</div>