现在你的任务是完成上面的getValidOrder函数，如果

[问答题]

下图是一个Accordion组件，请用HTML+CSS实现其UI,并用面向对象的思路把折叠效果的JS实现。如果能用纯css的方式实现其折叠效果更佳。

HTML:

CSS:

JS:

Sneezry.Lee

CSS:

* {
 margin: 0;
 padding: 0;
}

li {
 background: #eee;
 line-height: 24px;
 display: block;
 position: relative;
}

li a {
 background: #ddd;
 line-height: 24px;
 display: block;
}

ul li input[type="checkbox"] {
 position: absolute;
 top: 0;
 width: 100%;
 height: 24px;
 opacity: 0;
}

ul li input[type="checkbox"]:not(:checked) + ul {
 display: none;
}

HTML:

<ul>
 <li>
 <a>列表</a>
 <input type="checkbox" name="list" />
 <ul>
 <li>子列表</li>
 <li>子列表</li>
 <li>子列表</li>
 </ul>
 </li>
 <li>
 <a>列表</a>
 <input type="checkbox" name="list" />
 <ul>
 <li>子列表</li>
 <li>子列表</li>
 <li>子列表</li>
 </ul>
 </li>
</ul>

发表于 2015-01-30 01:01:32 回复(3)

太阳光

css:

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
dt a {
    background: #eee;
    line-height: 30px;
    display: block;
    text-decoration: none;
    padding-left: 30px;
    text-shadow: 0 0 2px #000;
    color: #eee;
    border-bottom: 1px solid #f9f9f9;
}
dt a:after {
    content: "";
    display: inline-block;
    border: 8px solid #444;
    border-color: transparent transparent transparent #444;
    position: absolute;
    left: 10px;
    margin-top: 7px;
}
dt:target a:after {
    border-color: #444 transparent transparent transparent;
    margin-top: 10px;
    left: 6px
}
li {
    padding-left: 30px;
    font-size: 12px;
    line-height: 24px;
    border-bottom: 1px dashed #ddd
}
dd {display: none}
dt:target + dd {display: block}

html:

<dl>
    <dt id="a1"><a href="#a1">列表</a></dt>
    <dd>
        <ul>
            <li>子列表</li>
            <li>子列表</li>
            <li>子列表</li>
        </ul>
    </dd>
    <dt id="a2"><a href="#a2">列表</a></dt>
    <dd>
        <ul>
            <li>子列表</li>
            <li>子列表</li>
            <li>子列表</li>
        </ul>
    </dd>
    <dt id="a3"><a href="#a3">列表</a></dt>
    <dd>
        <ul>
            <li>子列表</li>
            <li>子列表</li>
            <li>子列表</li>
        </ul>
    </dd>
</dl>

编辑于 2015-06-25 17:42:42 回复(2)

Benjamin

C++只能呵呵了

发表于 2015-04-23 08:58:17 回复(0)

立志当一名攻城狮

css * { margin: 0; padding: 0; list-style: none; } dt a { background: #eee; line-height: 30px; display: block; text-decoration: none; padding-left: 30px; text-shadow: 0 0 2px #000; color: #eee; border-bottom: 1px solid #f9f9f9; } dt a:after { content: ""; display: inline-block; border: 8px solid #444; border-color: transparent transparent transparent #444; position: absolute; left: 10px; margin-top: 7px; } dt:target a:after { border-color: #444 transparent transparent transparent; margin-top: 10px; left: 6px } li { padding-left: 30px; font-size: 12px; line-height: 24px; border-bottom: 1px dashed #ddd } dd {display: none} dt:target + dd {display: block}

发表于 2018-08-16 12:34:41 回复(0)

鱿鱼男

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UL显隐控制</title>
</head>
<script type="text/javascript">
   window.onload = function() {
       var div = document.getElementById("test");
       if (div.addEventListener) {
           div.addEventListener("click", zhedie, false);
       } else if (div.attachEvent) {
           div.attachEvent("onclick", zhedie);
       }
   }

   function zhedie(event) {
       var e = event || window.event;
       var element = e.target || e.srcElement;//获取触发事件的元素
       if (element.tagName == "A") {//处理a下属节点
           for (var node = element; node.nextSibling != null; node = node.nextSibling) {
               if(node.nodeType==1&&node.tagName=="LI"){
                   var display = node.style.display;
                   if(display=="none"){
                       node.style.display = "block";
                   }else{
                       node.style.display = "none";
                   }
               }
           }
       }

   }
</script>
<body>
   <div id="test">
       <ul>
           <a>a</a>
           <li>a1</li>
           <li>a2</li>
           <li>a3</li>
           <li>a4</li>
       </ul>
       <ul>
           <a>b</a>
           <li>b1</li>
           <li>b2</li>
           <li>b3</li>
           <li>b4</li>
       </ul>
       <ul>
           <a>c</a>
           <li>c1</li>
           <li>c2</li>
           <li>c3</li>
           <li>c4</li>
       </ul>
   </div>
</body>
</html>

发表于 2015-05-01 08:29:25 回复(1)

提交观点

问题信息

小米集团 HTML

上传者：小牧魔法袋

难度：

5条回答 82收藏 11219浏览

现在你的任务是完成上面的getValidOrder函数，如果

问题信息

热门推荐

相关试题