2つのフルスクリーンメニュー - トグルクラスを使用して1つを表示して非表示にする方法 -

Question

jquerytoggleclass私はフルスクリーンメニューを表示したり非表示にしています。問題は、全画面メニューが2つあるために発生します。開いている場合は、ユーザーが他のものをクリックするとどうやって隠すのですか？

私は両方ともshow/hideクラスを切り替える必要があると推測しています。divs。だから1つが「ショー」のときにもう1つは「隠す」。しかし、私はこれをどのようにして行うのですか？私はクラスを1つに切り替える方法を工夫しましたdivしかし2つではありません。

https://jsfiddle.net/facnr6f9/

$(document).ready(function(){ 
 
\t $(".projects_link").click(function(){ 
 
\t \t $(".projects_overlay").toggleClass("show_projects"); 
 
\t }); 
 
}); 
 

 
$(document).ready(function(){ 
 
\t $(".menu_link").click(function(){ 
 
\t \t $(".menu_overlay").toggleClass("show_menu"); 
 
\t }); 
 
});

.projects_overlay { 
 
display: none; 
 
} 
 
.show_projects { 
 
display: block; 
 
position: fixed; 
 
top: 7.2rem; 
 
left: 0; 
 
width: 100%; 
 
bottom: 0; 
 
background-color: pink; 
 
} 
 
.menu_overlay { 
 
display: none; 
 
} 
 
.show_menu { 
 
display: block; 
 
position: fixed; 
 
top: 7.2rem; 
 
left: 0; 
 
width: 100%; 
 
bottom: 0; 
 
background-color: pink; 
 
}

<span class="projects_link">PROJECTS</span> 
 
&nbsp;&nbsp;&nbsp;&nbsp; 
 
<span class="menu_link">MENU</span> 
 
<div class="projects_overlay"> 
 
    <ul> 
 
    <li>Project 1</li> 
 
    <li>Project 2</li> 
 
    <li>Project 3</li> 
 
    <li>Project 4</li> 
 
    <li>Project 5</li> 
 
    </ul> 
 
</div> 
 
<div class="menu_overlay"> 
 
    <ul> 
 
    <li>Page 1</li> 
 
    <li>Page 2</li> 
 
    <li>Page 3</li> 
 
    <li>Page 4</li> 
 
    </ul> 
 
</div>

Answer 1

いずれかが選択されたときにクラスが他のメニューから削除されていることを確認。例えば

：

$(".menu_link").click(function(){ 
    $(".projects_overlay").removeClass("show_projects"); 
    $(".menu_overlay").toggleClass("show_menu"); 
}); 

https://jsfiddle.net/facnr6f9/1/