javascript - 我想让我的元素网站的#menu 按钮像开关一样工作

Question

你好 stackoverflow 研究员我仍在处理我的画廊网站。当屏幕小于 640px 时，#menu 按钮会出现但是当我将光标放在它上面时，它会给我新的导航，但是当我将光标移出任一导航#menu 时，它将关闭导航，但我想让它打开导航，直到我再次单击#menu。我听说很多人尝试使用 CSS3 使网站具有响应性。我发现 :active 选择器不能解决这个问题另外，当我访问网站时 http://kyu317.dothome.co.kr/ , internet explorer 在 png 图像外画出 pupple? 蓝线...我对此一无所知。\感谢阅读我的帖子，请评论和批评我。

$(document).ready(function(){
    $(".showhome").click(function(){
        $(".home").show();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showProfile").click(function(){
        $(".home").hide();
        $(".Profile").show();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showGallery").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").show();
        $(".Contact").hide();
    });
    $(".showContact").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").show();
    });
    // Hide all and show home on page loading
    $(".home").show();
    $(".Profile").hide();
    $(".Gallery").hide();
    $(".Contact").hide();
});

@font-face {
	 font-family: font1;
	 src: url('fonts/CaviarDreams.woff');
}
#wrapper {
	margin:0 auto;
	background: white;
	border:1px solid white;
	max-width: 1000px;
}

header {
	max-width: 1000px;
	width: 100%;
	height: 76px;
	top: 0;
	left: 0;	
	border-bottom:1px solid black;
}

#logo {
	margin-top: 37px;
	margin-left: 10px;
	float: left;
	width: 160px;
	height: 30px;
	background: url(logo6.png) no-repeat center;
	display: block;	
}
	
nav {
	float: right;
	margin-top: 27px;
	margin-right: 10px;
	}
	
nav ul {
	list-style: none;
	}
	
nav ul li {
	display: inline-block;
	float: left;
	font-family: font1; 
	font-size: 15px;
	padding: 10px;
	text-decoration: none;
	cursor: pointer;
}

nav ul li:hover {
	color: #6F6F6F;
}

#menu{
	display: hidden;
	width: 40px;
	height: 40px;
	background: url(menu-icon.png) center;
}

/* MEDIA QUERY */
@media all and (max-width:640px) {
	
	#menu {
		display:inline-block;		
	}
	
	#menu:hover, nav:hover {
		background-color: #CBCBCB;
		border-radius: 3px 3px 0 0;
	}
	
	nav ul {		
		display: none;
		position: absolute;
		padding: 10px;
		background: #fff;
		border: 3px solid #CBCBCB;
		right: 19px;
		top: 57px;
		width: 25%;
		border-radius: 3px 0 3px 3px;
		z-index: 200;
	}	
	
	#menu:hover, nav:hover ul {
		display: block;
	}
	
	nav ul li {
		text-align: center;
		width: 85%;
		margin: 0 auto;
	}
}

#swap{
	margin: 40px 10px 40px;
	max-width: 980px;
	position: relative;
	padding: 0;
	border: 1px solid white;
	z-index:100;
	overflow: hidden;
}
/* home */
 .home img {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-height: 100%;
	max-width: 100%;
 }

 /* gallery */
.Gallery li{
	font-family: century gothic;
	font-size: 12px;
	display: block;	
	list-style: none;
	text-align: center;
}

.Gallery img {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-height: 100%;
	max-width: 100%;
	padding-top: 30px;
	padding-bottom: 10px;
}

/* footer */
#sns {
	text-align: center;
}
#sns li{
	display: inline-block;
	margin-right: 10px;
}

#copyright li{
	font-family: inherit;
	font-size: 13px;
	text-align: center;	
	list-style: none;
}

<div id="wrapper">
		<header class="header-site" role="banner">
			<a href="#" id="logo" class=showhome></a>
			<nav>
				<a href="#" id="menu"></a>
				<ul>
					<li class=showProfile>Profile</li>
                    <li class=showGallery>Gallery</li>
                    <li class=showContact>Contact</li>
				</ul>
			</nav>
		</header>
		<div id="swap">
			<div id="Home_contents"    class=home > <img src="images/home.png"> </div>
            <div id="Profile_contents" class=Profile >Profile contents</div>
            <div id="Gallery_contents" class=Gallery >						
						<img src="images/1.jpg">
						<li>GX1 20mm #Flower @CSUN Farmer's Market</li>
										
						<img src="images/2.jpg">
						<li>GX1 20mm #Nissan PGC10 @Motor show</li>
										
						<img src="images/3.jpg">
						<li>GX1 20mm #Fixie @Encino Velodrom</li>
										
						<img src="images/4.jpg">
						<li>GX1 20mm #Parents @In_cheon Int. Airport</li>
										
						<img src="images/5.jpg">
						<li>GX1 20mm #Melrose St. @Hollywood</li>
					
						<img src="images/6.jpg">
						<li>GX1 20mm #Street near LACMA @Los Angeles </li>				
						
			</div>
            <div id="Contact_contents" class=Contact >Contact contents</div>
		</div>
		<footer>
			<div id="sns">
			<li>
				<a class="Facebook-icon" href="https://www.facebook.com/verdi.park.1" target=" _blank"><img src="FACEBOOK.png"></a>
			</li>
			<li>
				<a class="instagram-icon" href="https://instagram.com/ipark317/" target=" _blank"><img src="INSTAGRAM.png"></a>
			</li>
			</div>
			<div id="copyright">
				<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
			</div>
		</footer>
	</div>
	<!-- Must have this line first, to enable functions in test.js -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Here you get the hide/show functions -->
	<script type="text/javascript" src="test.js"></script>
</body>

Answer 1

您所要做的就是将 content: menu; 添加到媒体查询中的菜单 @media all and (max-width:640px) 就像这样

@media all and (max-width:640px) {
  #menu {
    display:inline-block;  
    content: menu; 
  }
}

@font-face {
	 font-family: font1;
	 src: url('fonts/CaviarDreams.woff');
}
#wrapper {
	margin:0 auto;
	background: white;
	border:1px solid white;
	max-width: 1000px;
}

header {
	max-width: 1000px;
	width: 100%;
	height: 76px;
	top: 0;
	left: 0;	
	border-bottom:1px solid black;
}

#logo {
	margin-top: 37px;
	margin-left: 10px;
	float: left;
	width: 160px;
	height: 30px;
	background: url(logo6.png) no-repeat center;
	display: block;	
}
	
nav {
	float: right;
	margin-top: 27px;
	margin-right: 10px;
	}
	
nav ul {
	list-style: none;
	}
	
nav ul li {
	display: inline-block;
	float: left;
	font-family: font1; 
	font-size: 15px;
	padding: 10px;
	text-decoration: none;
	cursor: pointer;
}

nav ul li:hover {
	color: #6F6F6F;
}

#menu{
	display: hidden;
	width: 40px;
	height: 40px;
	background: url(menu-icon.png) center;
}

/* MEDIA QUERY */
@media all and (max-width:640px) {
	
	#menu {
		display:inline-block;		
      content: menu;
	}
	
	#menu:hover, nav:hover {
		background-color: #CBCBCB;
		border-radius: 3px 3px 0 0;
	}
	
	nav ul {		
		display: none;
		position: absolute;
		padding: 10px;
		background: #fff;
		border: 3px solid #CBCBCB;
		right: 19px;
		top: 57px;
		width: 25%;
		border-radius: 3px 0 3px 3px;
		z-index: 200;
	}	
	
	#menu:hover, nav:hover ul {
		display: block;
	}
	
	nav ul li {
		text-align: center;
		width: 85%;
		margin: 0 auto;
	}
}

#swap{
	margin: 40px 10px 40px;
	max-width: 980px;
	position: relative;
	padding: 0;
	border: 1px solid white;
	z-index:100;
	overflow: hidden;
}
/* home */
 .home img {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-height: 100%;
	max-width: 100%;
 }

 /* gallery */
.Gallery li{
	font-family: century gothic;
	font-size: 12px;
	display: block;	
	list-style: none;
	text-align: center;
}

.Gallery img {
	display: block;
	margin-left: auto;
    margin-right: auto;
	max-height: 100%;
	max-width: 100%;
	padding-top: 30px;
	padding-bottom: 10px;
}

/* footer */
#sns {
	text-align: center;
}
#sns li{
	display: inline-block;
	margin-right: 10px;
}

#copyright li{
	font-family: inherit;
	font-size: 13px;
	text-align: center;	
	list-style: none;
}

<div id="wrapper">
		<header class="header-site" role="banner">
			<a href="#" id="logo" class=showhome></a>
			<nav>
				<a href="#" id="menu"></a>
				<ul>
					<li class=showProfile>Profile</li>
                    <li class=showGallery>Gallery</li>
                    <li class=showContact>Contact</li>
				</ul>
			</nav>
		</header>
		<div id="swap">
			<div id="Home_contents"    class=home > <img src="images/home.png"> </div>
            <div id="Profile_contents" class=Profile >Profile contents</div>
            <div id="Gallery_contents" class=Gallery >						
						<img src="images/1.jpg">
						<li>GX1 20mm #Flower @CSUN Farmer's Market</li>
										
						<img src="images/2.jpg">
						<li>GX1 20mm #Nissan PGC10 @Motor show</li>
										
						<img src="images/3.jpg">
						<li>GX1 20mm #Fixie @Encino Velodrom</li>
										
						<img src="images/4.jpg">
						<li>GX1 20mm #Parents @In_cheon Int. Airport</li>
										
						<img src="images/5.jpg">
						<li>GX1 20mm #Melrose St. @Hollywood</li>
					
						<img src="images/6.jpg">
						<li>GX1 20mm #Street near LACMA @Los Angeles </li>				
						
			</div>
            <div id="Contact_contents" class=Contact >Contact contents</div>
		</div>
		<footer>
			<div id="sns">
			<li>
				<a class="Facebook-icon" href="https://www.facebook.com/verdi.park.1" target=" _blank"><img src="FACEBOOK.png"></a>
			</li>
			<li>
				<a class="instagram-icon" href="https://instagram.com/ipark317/" target=" _blank"><img src="INSTAGRAM.png"></a>
			</li>
			</div>
			<div id="copyright">
				<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
			</div>
		</footer>
	</div>
	<!-- Must have this line first, to enable functions in test.js -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Here you get the hide/show functions -->
	<script type="text/javascript" src="test.js"></script>