运用HTML+JS+DIV如何实现侧栏折叠的效果？？？做过类似效果的请进入！！！！

泡芙女孩儿 2012-12-28 09:47:05

我想通过HTML+JS+DIV实现侧栏折叠的效果，却始终显示不了这种效果！！！！！！！！！！！

有哪位高手能帮我看下代码是哪儿的问题呢？？？？



<head runat="server">

<meta charset="UTF-8" />

    <title></title>

    <link href="StyleSheet3.css" rel="stylesheet" type="text/css" />

</head>



<body style="font-family :@楷体_GB2312 ; font-weight :bolder ; color :Olive ;">

    <form id="form1" runat="server">

    <div  id ="div1" onmousedown ="show'mm'" onmouseout ="hide'mm'">

    培训管理<hr style ="width:150px;color:Maroon;position:absolute;left:0px; right: 717px;"/></div>

    <div id="mm" >

    <ul >

    <li ><a href ="RenL_1.aspx"  target="middle">查看培训信息</a></li>

    <li ><a href ="RenL_2.aspx"  target="middle">检索培训信息</a></li>

    <li ><a href ="RenL_3.aspx"  target="middle">删除培训信息</a></li>

    <li><a href ="RenL_4.aspx"   target="middle">添加培训信息</a></li>

    </ul>

    </div>

<script language ="javascript" type ="text/javascript" >

        function $(id) {

            return document.getElementById(id );

        }

        function show(id){

        $ (id ).style.display="";

        }

        function hide(id){

        $ (id ).style.display="none";

        }

    </script>

    </form>

</body>

...全文

516 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

JPF1024 2013-01-21

打赏
举报

引用 8 楼 wln00 的回复:

我晕，你引用了jquery类库了没？

我其实也想问问这个，不过用原生的js做也很简单的...我前几天写了一个，刚学的写的不好就不发了，。。

赢友网络 2013-01-21

打赏
举报

我晕，你引用了jquery类库了没？

heartbeaty 2013-01-08

打赏
举报

你用的什么浏览器？浏览器不同的话，显示也不同。在火狐里可以

heartbeaty 2013-01-08

打赏
举报

其他的不动，改变一下这个就行 <div id ="div1" onmouseenter ="show('mm')" onmouseout ="hide('mm')">

y_keven 2012-12-29

打赏
举报

引用 4 楼 xiaofan_sap 的回复:

XML/HTML code?1onmousedown ="show('mm')" onmouseout ="hide('mm')"

xiaofan_sap 2012-12-29

打赏
举报


onmousedown ="show('mm')" onmouseout ="hide('mm')"

泡芙女孩儿 2012-12-29

打赏
举报

没人知道么顶起顶起

泡芙女孩儿 2012-12-28

打赏
举报

引用 1 楼 calmcrime 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829303132<head runat="server"><meta charset="gbk" /> <title></title> <link href="StyleSheet3.css" rel="stylesheet" type="……

根据您作出的修改我又改了一下代码：

<script language ="javascript" type ="text/javascript" >
        function $(id) {
            return document.getElementById(id );
        }
        function fn(id) {
            var t = $(id);
            if (t.style.display == 'none') {
                t.style.display = '';
            }
            else { 
                t.style.display='none';
            }
        }

还是没有折叠的效果呢！！！

001007009 2012-12-28

打赏
举报

<head runat="server">
<meta charset="gbk" />
    <title></title>
    <link href="StyleSheet3.css" rel="stylesheet" type="text/css" />
</head>
 
<body style="font-family :@楷体_GB2312 ; font- weight :bolder ; color :Olive ;">
    <form id="form1" runat="server">
    <div  id ="div1" onclick="fn('mm')">
    培训管理<hr style ="width:150px;color:Maroon;position:absolute;left:0px; right: 717px;"/></div>
    <div id="mm" >
    <ul >
    <li ><a href ="RenL_1.aspx"  target="middle">查看培训信息</a></li>
    <li ><a href ="RenL_2.aspx"  target="middle">检索培训信息</a></li>
    <li ><a href ="RenL_3.aspx"  target="middle">删除培训信息</a></li>
    <li><a href ="RenL_4.aspx"   target="middle">添加培训信息</a></li>
    </ul>
    </div>
<script language ="javascript" type ="text/javascript" >
        function $(id) {
            return document.getElementById(id );
        }
        function fn(id){
			var t = $(id);
			t.style.display == 'none' ?
				t.style.display = '':
				t.style.display = 'none';	
        }
        
    </script>
    </form>
</body>