谁帮我做下这个ul的关闭和展开，为什么不起作用呢

-2

[已解决问题] 解决于 2014-12-29 14:26

 1  <script type="text/javascript">
 2         function Test() {
 3             if ($("#test").hide()) {
 4                 return $("#test").show();
 5             }
 6             else {
 7                 return $("#test").hide();
 8             }
 9             if ($("#test").show()) {
10                 return $("#test").hide();
11             }
12             else {
13                 return $("#test").show();
14             }
15         }
16         function Test1() {
17             if ($("#test1").hide()) {
18                 $("#test1").show();
19             }
20             else {
21                 $("#test1").hide();
22             }
23         }
24         function Test2() {
25             if ($("#test2").hide()) {
26                 $("#test2").show();
27             }
28             else {
29                 $("#test2").hide();
30             }
31         }
32     </script>

 1  <div class="sidebar" id="sidebar">
 2                 <h2 onclick="return Test();" class="disClose">基层</h2>
 3                 <ul id="test" class="disClose">
 4                     <li><a href="#">车间干部工作情况</a></li>
 5                     <li><a href="#">车辆值班值宿日报表</a></li>
 6                     <li><a href="#">工具值宿日报</a></li>
 7                     <li><a href="#">汽车运行计划</a></li>
 8                     <li><a href="#">日作业计划</a></li>
 9                     <li><a href="#">周计划作业</a></li>
10                 </ul>
11                 <h2 onclick="Test1()" class="disClose">统计</h2>
12                 <ul style="display: none" id="test1">
13                     <li>
14                         <h4>冻害汇总统计表</h4>
15                         <ul>
16                             <li><a href="#">正线冻害明细</a></li>
17                             <li><a href="#">站专线冻害明细</a></li>
18                         </ul>
19                     </li>
20                     <li><a href="#">京哈线正线冻害明细</a></li>
21                     <li>
22                         <h4>第二层</h4>
23                         <ul>
24                             <li><a href="#">一</a></li>
25                             <li><a href="#">二</a></li>
26                             <li><a href="#">三</a></li>
27                             <li><a href="#">四</a></li>
28                         </ul>
29                     </li>
30                     <li>
31                          <h4>第二层</h4>
32                         <ul>
33                             <li><a href="#">一</a></li>
34                             <li><a href="#">二</a></li>
35                             <li><a href="#">三</a></li>
36                             <li><a href="#">四</a></li>
37                         </ul>
38                     </li>
39                     <li><a href="#">曲线问题库</a></li>
40                 </ul>
41                 <h2 onclick="Test2()" class="disClose">管理</h2>
42                 <ul class="disClose" id="test2" style="display: none">
43                     <li><a href="#" class="selected">权限管理</a></li>
44                 </ul>
45             </div>

Html

javascript html

问题补充：

就是这样，我可以点击之后打开，但是关闭不了，求兼容，谢谢

_Vegetables | 小虾三级 | 园豆：586
提问于：2014-12-28 20:00

< >

最佳答案

//按照你的HTML结构，下面代码最简洁了。已经测试过可以的
$(function(){
    $("#sidebar>h2").click(function(){
        if($(this).next().is(":hidden")){
            $(this).next().show();
        }else{
            $(this).next().hide();
        }
    });
    
    
});

奖励园豆：5

骑着蜗牛耍流氓 | 初学一级 |园豆：135 | 2014-12-29 11:27

_Vegetables | 园豆：586 (小虾三级) | 2014-12-29 14:24

谢谢，看明白了

_Vegetables | 园豆：586 (小虾三级) | 2014-12-29 14:24

@_Vegetables:

$(function(){
    $("#sidebar>h2").click(function(){
        $(this).next().toggle();
    });
});

整合一下，这种方式更简洁

骑着蜗牛耍流氓 | 园豆：135 (初学一级) | 2014-12-29 14:34

其他回答(2)

你这个代码有行号啊，你能去掉吗

Slark.NET | 园豆：692 (小虾三级) | 2014-12-28 22:59

<div class="sidebar" id="sidebar">
                <h2 onclick="return Test();" class="disClose">基层</h2>
                <ul id="test" class="disClose">
                    <li><a href="#">车间干部工作情况</a></li>
                    <li><a href="#">车辆值班值宿日报表</a></li>
                    <li><a href="#">工具值宿日报</a></li>
                    <li><a href="#">汽车运行计划</a></li>
                    <li><a href="#">日作业计划</a></li>
                    <li><a href="#">周计划作业</a></li>
                    <li><a href="#">当日工作完成情况</a></li>

                </ul>
                <h2 onclick="Test1()" class="disClose">统计</h2>
                <ul style="display: none" id="test1">
                    <li><a href="#">重伤钢轨</a></li>
                    <li><a href="#">重伤钢叉</a></li>
                    <li>
                        <h4>冻害汇总统计表</h4>
                        <ul>
                            <li><a href="#">正线冻害明细</a></li>
                            <li><a href="#">站专线冻害明细</a></li>
                        </ul>
                    </li>
                    <li><a href="#">京哈线正线冻害明细</a></li>
                    <li>
                        <h4>非超临修问题库</h4>
                        <ul>
                            <li><a href="#">正线设备冻害明细</a></li>
                            <li><a href="#">站专线设备冻害明细</a></li>
                            <li><a href="#">正线道岔冻害明细</a></li>
                            <li><a href="#">站专线道岔冻害明细</a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>站专线道岔明细</h4>
                        <ul>
                            <li><a href="#">正线设备冻害明细</a></li>
                            <li><a href="#">站专线设备冻害明细</a></li>
                            <li><a href="#">正线道岔冻害明细</a></li>
                            <li><a href="#">站专线道岔冻害明细</a></li>
                        </ul>
                    </li>
                    <li><a href="#">曲线问题库</a></li>
                </ul>
                <h2 onclick="Test2()" class="disClose">管理</h2>
                <ul class="disClose" id="test2" style="display: none">
                    <li><a href="#" class="selected">权限管理</a></li>

支持(0) 反对(0) _Vegetables | 园豆：586 (小虾三级) | 2014-12-29 08:37

改好了测试过了。你要实现的功能用toggle()就行，这个函数就是点一下出现，再点一下隐藏，很方便。注意我这里用的自己机子上的jquery，<script src="Scripts/jquery-1.8.2.js"></script>，你直接运行这个代码不行。

@_Vegetables:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<script type="text/javascript">
function Test() {
$("#test").toggle();
}
function Test1() {
$("#test1").toggle();
}
function Test2() {
$("#test2").toggle();
}
</script>

</ul>
<h2 onclick="Test1()" class="disClose">统计</h2>
<ul style="display: none" id="test1">
<li><a href="#">重伤钢轨</a></li>
<li><a href="#">重伤钢叉</a></li>
<li>
<h4>冻害汇总统计表</h4>
<ul>
<li><a href="#">正线冻害明细</a></li>
<li><a href="#">站专线冻害明细</a></li>
</ul>
</li>
<li><a href="#">京哈线正线冻害明细</a></li>
<li>
<h4>非超临修问题库</h4>
<ul>
<li><a href="#">正线设备冻害明细</a></li>
<li><a href="#">站专线设备冻害明细</a></li>
<li><a href="#">正线道岔冻害明细</a></li>
<li><a href="#">站专线道岔冻害明细</a></li>
</ul>
</li>
<li>
<h4>站专线道岔明细</h4>
<ul>
<li><a href="#">正线设备冻害明细</a></li>
<li><a href="#">站专线设备冻害明细</a></li>
<li><a href="#">正线道岔冻害明细</a></li>
<li><a href="#">站专线道岔冻害明细</a></li>
</ul>
</li>
<li><a href="#">曲线问题库</a></li>
</ul>
<h2 onclick="Test2()" class="disClose">管理</h2>
<ul class="disClose" id="test2" style="display: none">
<li><a href="#" class="selected">权限管理</a></li>
<li><a href="#" class="selected">角色分配</a></li>
</ul>
</div>
</body>
</html>

支持(1) 反对(0) Slark.NET | 园豆：692 (小虾三级) | 2014-12-29 09:57

@Slark.NET: 谢谢了

支持(0) 反对(0) _Vegetables | 园豆：586 (小虾三级) | 2014-12-29 14:25

@Slark.NET: toggle()谢谢告知

支持(0) 反对(0) _Vegetables | 园豆：586 (小虾三级) | 2014-12-29 14:36

$("#test").toggleClass("disCloseCss");

隔壁老王来了 | 园豆：99 (初学一级) | 2014-12-29 09:54

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

谁帮我做下这个ul的关闭和展开，为什么不起作用呢

欢迎，请先登录或者注册。