首页 新闻 搜索 专区 学院

谁帮我做下这个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>
Js
 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
问题补充:

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

_Vegetables的主页 _Vegetables | 小虾三级 | 园豆:569
提问于:2014-12-28 20:00
< >
分享
最佳答案
1
//按照你的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 | 园豆:569 (小虾三级) | 2014-12-29 14:24

谢谢,看明白了

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

@_Vegetables: 

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

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

骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-12-29 14:34
其他回答(2)
1

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

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

<script type="text/javascript">
        function Test() {
            if ($("#test").hide()) {
                $("#test").show();
            }
            else {
                $("#test").hide();
            }
        }
        function Test1() {
            if ($("#test1").hide()) {
                $("#test1").show();
            }
            else {
                $("#test1").hide();
            }
        }
        function Test2() {
            if ($("#test2").hide()) {
                $("#test2").show();
            }
            else {
                $("#test2").hide();
            }
        }
    </script>

 

<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>

       <li><a href="#" class="selected">角色分配</a></li>
                </ul>
            </div>

支持(0) 反对(0) _Vegetables | 园豆:569 (小虾三级) | 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>

<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>
<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 | 园豆:569 (小虾三级) | 2014-12-29 14:25

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

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

    <style type="text/css">
   .disCloseCss
   {
        display:none;
       }
 
    </style> 

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

醉心 | 园豆:99 (初学一级) | 2014-12-29 09:54
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册