欢迎使用CSDN-markdown编辑器

写东西晚啦，上次写博客应该是俩月前了。工作快一个月了，一直在学习H5、div+css。工作需要，慢慢来。

用css实现一个下拉列表，借用网友的代码：

box,#box2,#box3,#box4{padding:10px;border:1px solid green;}

js+css展开层

function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;var openTip = oOpenTip || "";var shutTip = oShutTip || "";if(targetObj.style.display!="none"){ if(shutAble) return; targetObj.style.display="none"; if(openTip && shutTip){ sourceObj.innerHTML = shutTip; }} else { targetObj.style.display="block"; if(openTip && shutTip){ sourceObj.innerHTML = openTip; }}}

展开

源码爱好者（codefans.net）

展开

CodeFans.net 多少

展开

CodeFans.net是一个学习型源码站，提供各类编程源代码下载。

展开

谢谢您浏览本特效！

设置display为none,用js函数来实现显示。

下面是我自己所做项目的代码：

+按关键词筛选

• 非法占有
• 自首
• 罚金
• 共同犯罪
• 从犯
• 故意犯
• 非法占有
• 自首
• 罚金
• 共同犯罪
• 从犯
• 故意犯
• 非法占有
• 自首
• 罚金
• 共同犯罪
• 从犯
• 故意犯
• 非法占有
• 自首
• 罚金
• 共同犯罪
• 从犯
• 故意犯

                </div>

+按案由筛选

+ 刑事案由

• + 危害国家安全
  • 分裂国家
  • 煽动分裂国家
  • 颠覆国家政权
  • 煽动颠覆国家政权
  • 间谍

                                          </li>                                        <li>                                            <font size="+1">                                                <button onclick="openShutManager(this,'box2_1_2',false,'-','+')">+</button>                                                <button style="width:auto;height:20px">危害公共安全                                                </button>                                            </font>                                            <div id="box2_1_2" style="display:none">                                                <ul>                                                    <li>你厉害</li>                                                    <li>苗真厉害</li>                                                    <li>我厉害</li>                                                </ul>                                            </div>                                        </li>                                        <li>                                            <font size="+1">                                                <button onclick="openShutManager(this,'box2_1_3',false,'-','+')">+</button>                                                <button style="width:auto;height:20px;">破坏社会主义市场经济秩序                                                </button>                                            </font>                                            <div id="box2_1_3" style="display:none">                                                <ul>                                                    <li>你厉害</li>                                                    <li>苗真厉害</li>                                                    <li>我厉害</li>                                                </ul>                                            </div>                                        </li>                                        <li>                                            <font size="+1">                                                <button onclick="openShutManager(this,'box2_1_4',false,'-','+')">+</button>                                                <button style="width:auto;height:auto">侵犯公民人身权利、民主权利                                                </button>                                            </font>                                            <div id="box2_1_4" style="display:none">                                                <ul>                                                    <li>你厉害</li>                                                    <li>苗真厉害</li>                                                    <li>我厉害</li>                                                </ul>                                            </div>                                        </li>                                    </ul>                                </div>                        </div>                </div>