ハンバーガーメニューのクラス付与・削除を指定要素のクリックで複数の要素にクラス付与・削除をしたい

Question

前提・実現したいこと

スマホのハンバーガーメニューで、メニュー内にあるページ内リンクをタップしたときに、メニューを閉じるようにしました。

それと同時にメニューボタンに付与しているクラスを取り除きたいのですが、メニューに付与されているクラスは削除できるものの、メニューボタンに付与されているクラスが取り除けません。

2つの要素に同時にクラスを取り除きたいのですが、下記コードでは一つの要素に付与されているクラスを取り除くだけです。

発生している問題

.header-nav の他にもう一つ、 .menu_btn　にもクラス名（この場合は open）を付与もしくは削除をしたいのですが、どちらか片方にしか付与・削除ができません。

該当のソースコード

$(function() {
    $('.header-nav').click(function(){ 
        $(this).toggleClass('open');
    });

    $('li a').on('click', function(){
        if (window.innerWidth <= 768) {
            $('.header-nav').click();
        }
    });
});

試したこと

下記部分を

$('.header-nav')　

このように記述したりしてみました。

$('.header-nav, .menu_btn')　
$('.header-nav','.menu_btn')

$('.menu_btn, .header-nav')
$('.menu_btn','.header-nav')

あまり詳しくなく、自分なりに調べて見よう見まねでやっていましたが行き詰ってしまいました。
どなたかご教授いただけると助かります。
よろしくお願いいたします m(_ _)m

Answer 1

「.header-nav」と「.menu_btn」の相関関係によります。
どちらかがどちらかの中に包含されているような場合はバブリングが必要かも

Comments

[yambejp]

依存関係がないならセレクタはカンマ区切りで指定すればいけます
<style>
.humburger:not(.open) ul{
display:none;
}
</style>
<script>
$(function(){
$('.humburger').on('click',function(){
$('.a,.b').toggleClass('open');
});
});
</script>

<div class="humburger a">
humburger
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="humburger b">
humburger
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

[ysweb]

コメントありがとうございます。

イベントバブリングというやつでしょうか。

その辺は全く知らなかったので色々と調べていますが、難しいですね ＞＜

現在のソースはこのようになっています。

＝＝＝＝＝＝＝＝＝＝　HTML　＝＝＝＝＝＝＝＝＝＝
<header>

<div class="header-top">
<div class="banner">
<div class="trigger sp"><span></span><span></span><span></span></div>
</div>
</div>

<nav class="header-nav">
<ul class="nav-list">
<li class="nav-link">
メニュー1
</li>
<li class="nav-link">
メニュー2
</li>
</ul>
</nav>

</header>

＝＝＝＝＝＝＝＝＝＝　JS　＝＝＝＝＝＝＝＝＝＝
$(function() {
$('.header-nav').click(function(){
$(this).toggleClass('open');
});

$('li.nav-link a').on('click', function(){
if (window.innerWidth <= 768) {
$('.header-nav').click();
}
});
});
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

('.header-nav') ⇒ ('.header-nav,.trigger')

このようにすると、メニューが開いたときにメニュー１や２のリンクをクリックすると

class="header-nav open"　が　class="header-nav"　になります。

が、

class="trigger sp open" は　class="trigger sp open"　のままです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

('.header-nav') ⇒ ('.trigger,.header-nav')　このようにした場合はメニューボタンを押した場合だけ

class="header-nav"に open が付与されたり削除されたりします。

class="trigger sp"　には　open　の付与もしません。

『.header-nav』と『.trigger』は<header>の中にありますが、この場合も『入れ子』という風になるのでしょうか？

[yambejp]

例示にli.nav-linkの中にaが無いので微妙ですが・・・
便宜上openクラスがつくと赤くするとこんな感じ

<style>
.open{color:red}
</style>
<script>
$(function() {
$('.header-nav').on('click',function(){
$(this).toggleClass('open');
});

$('li.nav-link a').on('click', function(e){
//e.preventDefault();
e.stopPropagation();
$('.header-nav').trigger('click');
});
});
</script>

<header>

<div class="header-top">
<div class="banner">
<div class="trigger sp"><span></span><span></span><span></span></div>
</div>
</div>

<nav class="header-nav">
<ul class="nav-list">
<li class="nav-link">
メニュー1
<a href="#">a1</a>
</li>
<li class="nav-link">
メニュー2
<a href="#">a2</a>
</li>
</ul>
</nav>

</header>

[ysweb]

ありがとうございます。

> 例示にli.nav-linkの中にaが無いので微妙ですが・・・

すいません。書き忘れです m(_ _)m

教えていただいたソースを使っても動作が同じ出したが、

最後の

$('.header-nav').trigger('click');

を

$('.trigger').trigger('click');

にすれば望む動作をしてくれました。

親切に何度も回答いただき感謝です＾＾