一个小公司的面试题目，俺也没有能做上来，真是惭愧......................

我也来贴个
<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
        <script>
        function test(obj)
        {
if(typeof obj._toggle == 'undefined')obj._toggle = false;
o = obj;
obj = findNext(obj);
while(obj != null && typeof obj.style != 'undefined'){
if(o._toggle) obj.style.display = 'block';
else obj.style.display = 'none';
obj = findNext(obj);

}
o._toggle = !o._toggle;

        }
function findNext(obj){
while(obj != null && obj.nextSibling != null){
obj = obj.nextSibling;
if(obj.tagName == 'DIV' && obj.id != 'two')return obj;//找到下一个div时返回
}
return false;
}
        </script>
    </head>
    <body>
        <div onclick="test(this)">第一层</div>
        <div onclick="test(this)">第二层</div>
        <div onclick="test(this)">第三层</div>
        <div id="two">根目录二</div>
    </body>
</html>

<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
    </head>
    <body>
    <div>第二层</div>
        <div>第一层</div>
        <div>第三层</div>
        <div id="two">根目录二</div>
  <script>
    function doit(x){
switch(x){
case a :
                if (arrayDiv[b].style.display!="none"){
        arrayDiv[b].style.display="none";
                    arrayDiv[c].style.display="none";
}
else{
    arrayDiv[b].style.display="";
                    arrayDiv[c].style.display="";
}
    break;
case b :
    if (arrayDiv[c].style.display!="none"){
                    arrayDiv[c].style.display="none";
}
else{
     arrayDiv[c].style.display="";
}
    break;
default:
    break;
}
}
        var arrayDiv = document.getElementsByTagName("div");
for (i=0;i<arrayDiv.length;i++){
            switch(arrayDiv[i].innerHTML)
            {
            case "第一层" :
    var a = i;
    arrayDiv[a].onclick = function(){doit(a)}
break;
case "第二层" :
    var b = i;
    arrayDiv[b].onclick = function(){doit(b)}
    break;
case "第三层" :
    var c = i;
    break;
default:
    break;
            }
}
      </script>
    </body>
</html>我这样写的好处是，DIV交换位置都没关系，如下排列都可实现要求。<div>第二层</div>
<div>第一层</div>
<div>第三层</div>

<html>
<head>
<style type="text/css">
div {
    width:400px;
    height:25px;
    border:1px solid #000000;
    cursor:pointer;
}
</style>
<script type="text/javascript">
function handleDivClick(e){
    var evt=e||window.event;
    var srcEl=evt.target||evt.srcElement;
    var oNextEl=srcEl.nextSibling;
    var isShow=!srcEl.isShow;
    var oDivRoot=(function(){
                    var aDivs=document.getElementsByTagName("div");
                    return aDivs[aDivs.length-1];
                 })();    while(oNextEl!=oDivRoot){
        if(oNextEl.tagName=="DIV"){
            oNextEl.isShow=isShow;
            oNextEl.style.display=isShow?"block":"none";
        }
        oNextEl=oNextEl.nextSibling;
    }

    srcEl.isShow=isShow;
}window.onload=function(){
    var aDivs=document.getElementsByTagName("div");
    var i,nLen=aDivs.length-1;

    for(i=0;i<nLen;i++){
        aDivs[i].isShow=true;
        aDivs[i].onclick=handleDivClick;
    }
}
</script>
</head>
<body>
    <div onclick="test(this)">第一层</div>
    <div onclick="test(this)">第二层</div>
    <div onclick="test(this)">第三层</div>
    <div id="two">根目录二</div>
</body>
</html>

写一个最简单的吧
基本思想是按下的那一层底下的所有层只需和点击按钮的第2层的"none"或"block"状态一样即可
例如：按下第2层时候第3层的显示状态变下 4，5，6,7,8等等只需把状态和3层一样即可
具体代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>

    </head>
    <body>
        <div onclick=a(this)>第一层</div>
        <div onclick=a(this)>第二层</div>
        <div onclick=a(this)>第三层</div>
<div onclick=a(this)>第4层</div>
<div onclick=a(this)>第5层</div>
<div onclick=a(this)>第6层</div>
        <div id="two">根目录二</div>
<script>
       function a(x){
            var b;
while (x.nextSibling.id !="two") {
            x=x.nextSibling;
if(!b)//注意(!"none") 为假
b=x.style.display=='none'?'block':'none';
x.style.display=b;
}
        }
</script>
    </body>
</html>

<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
        <script>
        var a = true
        function c(j)
{
       for(var i = 0;i < document.body.children.length;i++)
{
if(a)
{
if(i >= j)document.body.children(i).style.display = "none";
else document.body.children(i).style.display = "";
}
else document.body.children(i).style.display = "";
}
a = !a;
}
        </script>
    </head>
    <body>
        <div onclick="c(1)">第一层</div>
        <div onclick="c(2)">第二层</div>
        <div onclick="c(3)">第三层</div>
        <div id="two">根目录二</div>
    </body>
</html>

按照LZ思路做了一个,只能按照题目要求的步骤操作!<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
        <script>
        function test(obj)
        {
obj = obj.nextSibling;
while(obj.id!="two"){
if(obj.style.display == "none"){
                    obj.style.display = "block";
                } else if(obj.id!="two"){
   obj.style.display = "none";
   obj = obj.nextSibling;
                }else {
   obj.style.display = "block";
}
   obj = obj.nextSibling;
}
}
        </script>
    </head>
    <body>
(1)点击 "第二层" 则第三层隐藏，接着点击 "第一层"，则"第二层"
和"第三层",均为隐藏，再接着点击"第一层","第二层","第三层"
均为显示,再接着点击"第二层","第三层"为隐藏状态.
下面是我当时做的，功能实现了部分。        <div onclick="test(this)">第一层</div>
        <div onclick="test(this)">第二层</div>
        <div onclick="test(this)">第三层</div>
        <div id="two">根目录二</div>
    </body>
</html>ps:面试公司要求多长时间做出来?从23:25到发帖时间截止!才做出来!

就是点击一个按钮，第二项状态改变，其他参照第二项
<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
        <script>
        function test(obj)
        {
            var displayname;
            obj=obj.nextSibling;
            if(obj.id!="two"){
             if(obj.style.display=="none"){
             obj.style.display="block";
             }else{
             obj.style.display="none";
             }
             displayname=obj.style.display;
            }
            while(obj.nextSibling.id!="two"){
             obj=obj.nextSibling;
             obj.style.display=displayname;
            }
        }
        </script>
    </head>
    <body>
        <div onclick="test(this)">第一层</div>
        <div onclick="test(this)">第二层</div>
        <div onclick="test(this)">第三层</div>
        <div onclick="test(this)">第四层</div>
        <div onclick="test(this)">第五层</div>
        <div onclick="test(this)">第六层</div>
        <div onclick="test(this)">第七层</div>
        <div id="two">根目录二</div>
    </body>
</html>

为什么非要管two那个ID,只要求实现上面的功能的话，下面一段简单代码就可以，为什么都要写的那么复杂。
恩.我先说我的javascript极烂 function test(obj){
            obj=obj.nextSibling;
             if(obj.style.display == "none")
                {
                    obj.style.display = "block";
                     obj.nextSibling.style.display = "block";
                }
                else
                {
                    obj.style.display = "none";
                    obj.nextSibling.style.display = "none";
                }

        }

引用10楼的代码，如下:<html>
    <head>
        <style type="text/css">
        div {  width:400px; height:25px; border:1px solid #000000; cursor:pointer;}
        </style>
    </head>
    <body>
        <div>第二层</div>
        <div>第一层</div>
        <div>第三层</div>
        <div id="two">根目录二</div>
      <script>
        function doit(x){
            switch(x){
            case a :
                if (arrayDiv[b].style.display!="none"){
                    arrayDiv[b].style.display="none";
                    arrayDiv[c].style.display="none";
                }
                else{
                    arrayDiv[b].style.display="";
                    arrayDiv[c].style.display="";
                }
                break;
            case b :
                if (arrayDiv[c].style.display!="none"){
                    arrayDiv[c].style.display="none";
                }
                else{
                     arrayDiv[c].style.display="";
                }
                break;
            default:
                break;
            }
        }
        var arrayDiv = document.getElementsByTagName("div");
        for (i=0;i<arrayDiv.length;i++){
            switch(arrayDiv[i].innerHTML)
            {
            case "第一层" :
                var a = i;
                arrayDiv[a].onclick = function(){doit(a)}
                break;
            case "第二层" :
                var b = i;
                arrayDiv[b].onclick = function(){doit(b)}
                break;
            case "第三层" :
                var c = i;
                break;
            default:
                break;
            }
        }
      </script>
    </body>
</html>10楼代码经本人测试，正确通过，而且颠倒DIV排列次序都没有问题

我解释一下我的话吧~这样题目明显是故意给人设置了障碍，因为我们都知道，给要控制的元素设置一个id就很容易定位和控制，而出题者故意不设置id让你很舒服很正常的解决这个问题，那出题者想考察什么？
试想一下，如果你进了这样的公司，公司会不会在某些问题上故意刁难你呢~当然，纯粹作为一个技术探讨来说，这样的限制还可能有点意思~

也不能这样讲
这个技术可以用于一个无限分类
中点击上一层隐藏下一层,而不需要知道第一层的id号
同样能实现有id一样的功能,
何乐而不为呢?
楼上的太过于自卑了吧,哈哈

调试易

一个小公司的面试题目，俺也没有能做上来，真是惭愧......................

解决方案 »