jquery 實現選單的隱藏與顯現
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>選單欄</title>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){ /*開始寫jquery語句*/
$("ul").hide();
$("p").click(function(){
if($(this).next("ul").is(":hidden")){
$(this).next("ul").show();
}else{
$(this).next("ul").hide();
}
});
});
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
cursor:pointer;
}
#btn{
background-color:#00BFFF;
color:white;
}
ul{
height:auto;
line-height:20px;
}
</style>
</head>
<body>
<p style="vertical-align:middle;"><a href="#"><img src="./img/add-1.jpg" width=20px;height:20px;><button id="btn">單位資訊</button></a></p>
<ul>
<li><button id="btn">基本資訊</button></li>
<li><button id="btn">基本資訊</button></li>
<li><button id="btn">基本資訊</button></li>
<li><button id="btn">基本資訊</button></li>
<li><button id="btn">基本資訊</button></li>
</ul>
</body>
</html>