這是我的html文件打開/關閉菜單上,單擊使用只有JavaScript沒有jQuery的
<form id="form1" runat="server">
<div class ="mvbar">
<ul>
<li><a href ="m">Home</a></li>
<li><a href ="m">About</a></li>
<li class="pjlist" onclick="load"><a href ="m">Projects</a>
<div class="sub1">
<ul>
<div class="arrow1"></div>
<li><a href ="m">Projects1</a></li>
<li><a href ="m">Projects2</a></li>
<li><a href ="m">Projects3</a></li>
</ul>
</div>
</li>
<li class="svlist" onclick="load"><a href ="m">Services</a>
<div class="sub2">
<ul>
<div class="arrow2"></div>
<li><a href ="m">Services1</a></li>
<li><a href ="m">Services2</a></li>
<li><a href ="m">Services3</a></li>
<li><a href ="m">Services4</a></li>
<li><a href ="m">Services5</a></li>
</ul></div>
</li>
<li><a href ="m">Contact Us</a></li>
</ul>
</div>
</form>
,這是我的CSS類
.mvbar ul {
list-style:none;
margin:0;
padding:0;
}
.mvbar li {
float:left;
width:15%;
text-align:center;
background-color:grey;
border-right:1px solid white;
position:relative;
}
.mvbar li ul{
position:absolute;
top:30px;
}
.mvbar li ul li{
float:none;
width:210%;
text-align:left;
padding-left:4px;
}
.mvbar a {
font-family:'Meiryo UI',Verdana,sans-serif;
color:black;
text-decoration:none;
display:block;
}
.arrow1 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.arrow2 {
width:0;
height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid grey;
position:relative;
right:-80%;
}
.sub1 {
visibility:hidden;
}
.sub2 {
visibility:hidden;
}
我可以做同樣的事情在CSS,但需要很多爲了在每個瀏覽器中工作而添加的異常,但是javascript是我之前沒有用過的東西,並且我被建議使用它可以相當容易。 所以,請有人告訴我如何打開/關閉僅使用JavaScript的子菜單。
在此先感謝!
那麼,你需要更新很多東西。我已經添加了一些爲你 - http://plnkr.co/edit/V50U7sFYOX0hlxr9Y6U2?p=preview – nikhil
我還沒有嘗試過任何東西,只是從http://stackoverflow.com/questions/28167327/javascript-click代碼-to-open-and-close-menu-not-using-jquery。但我不知道有什麼問題 – angry
@nikhil謝謝!你是那個人;-) – angry