这个树状菜单怎么来切换？

本帖最后由 rao3324180 于 2011-06-28 13:03:05 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style type="text/css">
    .win{width:200px}
    .title{height:25px;background:#ccc;}
    .content{padding:20px 0}
  </style>
</head> <body>

        <div id="win1" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>
        <div id="win2" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>        <div id="win3" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>
<script type="text/javascript">
var args;
function change(){
var $ = function(id){return document.getElementById(id)}
var args = arguments;
for(var i=0; i<arguments.length; i++){
$(arguments[i]).firstChild.onclick = function(){
var len = args.length;
for(var j in args){
if(args[j] != this.parentNode.id){
$(args[j]).firstChild.nextSibling.style.display = "none"
}
}
}
}
}
change("win1","win2","win3")
</script>
</body>
</html>这样吗？
或者是这样：
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style type="text/css">
    .win{width:200px}
    .title{height:25px;background:#ccc;}
    .content{padding:20px 0}
  </style>
</head> <body>

        <div id="win1" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>
        <div id="win2" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>        <div id="win3" class="win"><div class="title">title</div><div class="content">
                content
            </div>
        </div>
<script type="text/javascript">
var args;
function change(){
var $ = function(id){return document.getElementById(id)}
var args = arguments;
for(var i=0; i<arguments.length; i++){
$(arguments[i]).firstChild.onclick = function(){
var len = args.length;
for(var j in args){
if(args[j] != this.parentNode.id){
$(args[j]).firstChild.nextSibling.style.display = "none"
}else{
break;
}
}
}
}
}
change("win1","win2","win3")
</script>
</body>
</html>
this.nextSibling.style.display = this.nextSibling.style.display=="none"?"block": "none";判断下就行了。
<script type="text/javascript">
    function change(){
        var $ = function(id){return document.getElementById(id)}
        for(var i=0; i<arguments.length; i++){
            var _s = $(arguments[i]);
            _s.firstChild.onclick = function(){
var d = document.getElementsByTagName('div');
for(j = 0; j < d.length; j ++) {
if (d[j].className == 'content') {
if (d[j].parentNode.id != this.parentNode.id) d[j].style.display = 'none';
else d[j].style.display = 'block';
}
}
            }
        }
    }
    change("win1","win2","win3")
</script>