我試圖使用一個漢堡包圖示來切換ul元素的顯示，這樣當我點擊圖示時，ul元素就會顯示或隱藏。 以下是我的代碼。
ul元素很快就消失了，而且不會停留太久。我想點擊漢堡包選單并顯示或隱藏ul元素。希望你能幫助我。
<! DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<! [endif]-->
<html>
<head>
<meta charset="utf-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fashionation</title>
< meta name="description" content="">
< meta name="viewport" content="width=device-width, initial-scale=1">
<link rel=" stylesheet" href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">/span>
<link rel="styleheet" href="style。 css">
</head>
<body>
<header>
<nav>
<a href="#"/span>> 品牌名稱</a>。
<ul id="list">/span>
<li><a href="> 首頁</a></li>/span>
<li>a href="> 新到貨物</a>/span></li>
<li>a href="> 衣服</a></li>/span>
<li>a href="> 銷售</a></li>/span>
<li>a href="> Stores</a></li>/span>
<li><a href="> 關于</a></li>/span>
<li><a href="> 聯系</a></li>>
</ul>/span>
< a href="" class="menu" id="menu" onclick="displayMenu()"> <i class="fa fa-bars fa-2x"/span>>。 </i></a>/span>
</nav>
</header>/span>
<script src="script. js"></script>>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
/* background-color: red; */ {
}
header {
height: 450px;
/* background-color: orangered; */
}
nav {
height: 50px;
background-color: #262626;
line-height: 50px;
position: relative;
}
nav ul {
/* background-color: orangered; */ {
margin-top: 10px;
margin-bottom: 10px;
/* display: none; */.
}
nav ul li {
padding: 2px;
text-align: center;
}
a {
color: #C70D6C;
}
.menu {
color: #C70D6C;
position: absolute;
top: 6px;
right: 10px;
line-height: 50px;
display: none;
}
@media screen and （max-width: 767.98px) {
.menu {
display: inline-block;
}
JavaScript
function displayMenu() {
let list = document.getElementById('list') 。
if (list.style.display == "none") {
list.style.display = "block";
} else {
list.style.display = "none"。
}
uj5u.com熱心網友回復：
使用這個 href=""會導致頁面重新加載。
。使用這些解決方案中的一個。
< button class="menu"/span> id="menu" onclick="displayMenu()" >
<i class="fa fa-bar fa-2x"> </i>>
</button>/span>
或者
<a style="cursor: pointer" class="menu" id="menu" onclick="displayMenu()">
<i class="fa fa-bar fa-2x"> </i>>
</a>
如果你使用第二個解決方案，請將行內的 css到你的css類 "選單"。
uj5u.com熱心網友回復：
你不應該為這個特定的任務使用a。使用button代替。用button替換a，在一些樣式的幫助下，你可以達到完全相同的結果
function displayMenu(e) {
let list = document.getElementById('list') 。
if (list.style.display == "none") {
list.style.display = "block";
} else {
list.style.display = "none"。
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
/* background-color: red; */ {
}
header {
height: 450px;
/* background-color: orangered; */
}
nav {
height: 50px;
background-color: #262626;
line-height: 50px;
position: relative;
}
nav ul {
/* background-color: orangered; */ {
margin-top: 10px;
margin-bottom: 10px;
/* display: none; */.
}
nav ul li {
padding: 2px;
text-align: center;
}
a {
color: #c70d6c;
}
.menu {
color: #c70d6c;
position: absolute;
top: 6px;
right: 10px;
height: 2rem;
width: 2rem;
background-color: #262626;
border: none;
}
@media screen and （max-width: 767.98px) {
.menu {
display: inline-block;
}
}<link href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="styleheet" />
<header>
<nav>
<a href="#"/span>> 品牌名稱</a>。
<ul id="list">/span>
<li><a href="> 首頁</a></li>/span>
<li>a href="> 新到貨物</a>/span></li>
<li>a href="> 衣服</a></li>/span>
<li>a href="> 銷售</a></li>/span>
<li>a href="> Stores</a></li>/span>
<li><a href="> 關于</a></li>/span>
<li><a href="> 聯系</a></li>>
</ul>/span>
< button class="menu" id="menu" onclick="displayMenu()" > <i class="fa fa-bars fa-2x"/span>>。 </i></button>
</nav>/span>
</header>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321040.html
標籤：
下一篇：關于文本區域的問題