Question

我正在使用jquery toggleclass来显示和隐藏全屏菜单。问题出现是因为有两个全屏菜单。如果一个是开放的，如果用户点击另一个，我该如何隐藏它？

我猜我需要切换divs上的show / hide类。因此，当一个人“显示”时，另一个人是“隐藏”。但是我该怎么做？我已经研究了如何在一个div上切换课程，而不是两个。

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

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

两个全屏菜单 - 如何显示一个并隐藏另一个 - 使用toggleclass

1 个答案: