자바스크립트 드롭다운 목록 menu_javascript 스킬 구현 방법
- WBOY원래의
- 2016-05-16 15:31:321434검색
전에 썼던 글입니다 "자바스크립트 드롭다운 목록에 트리 메뉴를 표시하는 구현 방법" 메뉴를 구현한 것인데, 작성하고 보니 높이가 적당하지 않은 것 같습니다. 정확하게 제어할 수 있고 그다지 좋지도 않습니다. 이제 테이블을 사용하여 테이블의 각 행이 가득 차면 다음 행이 자동으로 추가된다는 것을 알고 있습니다. 이는 높이를 직접 설정할 때보다 훨씬 좋습니다.
1. 두 번의 클릭이 공존할 수 있습니다(함수가 다른 방식으로 작성된 경우)
디스플레이도 직접 설정하여 상위 노드를 통해 하위 노드를 표시할지 여부를 결정합니다.
/* 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으로 문의하세요.