javascript下拉清單選單的實作方法_javascript技巧
- WBOY原創
- 2016-05-16 15:31:321433瀏覽
之前寫過這個《javascript下拉列表中顯示樹形菜單的實現方法》菜單的體現，但是在寫了之後就發現了，不太適合，高度要精準控制，並且還不是很好看。現在採用table來封裝，我們知道table的每一行寫滿了之後，下一行會自動加，這個比之前我們自己制定高度好很多。
1、點擊之後都可以並存的情況（只要函數寫法不一樣就可）
dispaly也是自己設定的，透過父節點來操作子節點，顯示與否；
/* function open1(node){
//通过父节点来操作兄弟节点
当点击之后出现之后，直接就能打开但是要求在点开一个时候，其余的都关掉
var nodes = node.parentNode;
var nn = nodes.getElementsByTagName("ul")[0];
with (nn.style) {
display = (display == "block") ? "none" : "block";
}
}*/
</script>
2、點擊之後只允許打開一個，其餘的都要關掉
<script type="text/javascript">
function list1(node){
//这是要对全部操作，必须要得到所有的对象 （根据table 的id 来获得）
//根据this判断，不是属于this，那么就关闭
//alert("aa");
//1，获得点击对象的值
var nodes = node.parentNode;//传入当前的父节点
var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象，要是遍历所有，与这个对象一样，就设置相反的情况，其余的全部关闭
//2，获得全部对象
var mm = document.getElementById("menuid");
var names = mm.getElementsByTagName("ul");
//3，开始一一配对
for (var x = 0; x < names.length; x++) {
/*这样写，可以简化，利用下面的方法
if (names[x] == nn) {
if (nn.className == "open2") {
nn.className = "close2";
}
else {
nn.className = "open2";
}
}else {
nn.className = "close2";
}*/
if(names[x]==nn&&names[x].className!="open2"){
nn.className="open2";
}else{
names[x].className="close2";
}
}
}
</script>
css樣式的編寫：
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
}
table{
border:#00ff40 solid 1px;
}
table a{
text-decoration:none;
}
table tr td ul{
display:none;
}
.open2{
display:block;
background:#8080ff;
}
.close2{
display:none;
}
效果圖（只能開一個的）：
完整程式碼：
<!DOCTYPE html>
<html>
<head>
<title>qqMenu.html</title>
<style type="text/css">
ul{
list-style:none;
margin:0px;
padding:0px;
}
table{
border:#00ff40 solid 1px;
}
table a{
text-decoration:none;
}
table tr td ul{
display:none;
}
.open2{
display:block;
background:#8080ff;
}
.close2{
display:none;
}
</style>
<script type="text/javascript">
/* function open1(node){
//通过父节点来操作兄弟节点
当点击之后出现之后，直接就能打开但是要求在点开一个时候，其余的都关掉
var nodes = node.parentNode;
var nn = nodes.getElementsByTagName("ul")[0];
with (nn.style) {
display = (display == "block") ? "none" : "block";
}
}*/
</script>
<script type="text/javascript">
function list1(node){
//这是要对全部操作，必须要得到所有的对象 （根据table 的id 来获得）
//根据this判断，不是属于this，那么就关闭
//alert("aa");
//1，获得点击对象的值
var nodes = node.parentNode;//传入当前的父节点
var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象，要是遍历所有，与这个对象一样，就设置相反的情况，其余的全部关闭
//2，获得全部对象
var mm = document.getElementById("menuid");
var names = mm.getElementsByTagName("ul");
//3，开始一一配对
for (var x = 0; x < names.length; x++) {
/*这样写，可以简化，利用下面的方法
if (names[x] == nn) {
if (nn.className == "open2") {
nn.className = "close2";
}
else {
nn.className = "open2";
}
}else {
nn.className = "close2";
}*/
if(names[x]==nn&&names[x].className!="open2"){
nn.className="open2";
}else{
names[x].className="close2";
}
}
}
</script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body >
<table id="menuid">
<tr>
<td>
<!--<a href="javascript:void(0)" onclick="open1(this)">同事栏</a>-->
<a href="javascript:void(0)" onclick="list1(this)">同事栏</a>
<ul >
<li>同事1</li>
<li>同事2</li>
<li>同事3</li>
<li>同事4</li>
</ul>
</td>
</tr>
<tr>
<td>
<!--<a href="javascript:void(0)" onclick="open1(this)">同学栏</a>-->
<a href="javascript:void(0)" onclick="list1(this)">同学栏</a>
<ul>
<li>同学1</li>
<li>同学2</li>
<li>同学3</li>
<li>同学4</li>
</ul>
</td>
</tr>
<tr>
<td>
<!--<a href="javascript:void(0)" onclick="open1(this)">黑名单栏</a>-->
<a href="javascript:void(0)" onclick="list1(this)">黑名单栏</a>
<ul>
<li>黑名单同学1</li>
<li>黑名单同学2</li>
<li>黑名单同学3</li>
<li>黑名单同学4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
相信大家透過這兩篇文章的介紹應該有了大概的思路，小編的這篇文章有些製作的效果略微簡陋，大家可以再進一步的完善。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn