js伸缩菜单问题

Question

我在网上找的代码<style>
<!--#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script >
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}
</script>
[code=HTML]
     <div id="navigation" >
<ul id="listUL" >

<li><a href="#">News</a>
         <ul class="myHide">
             <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
</ul>
</div>
[/code]上面代码运行是正常 可是我要加到我的页面里 我需要给他添加个样式 添加上就伸缩不了！如： <ul id="listUL" class="cjgl_cd2" >不知道应该怎么改一下！！

Answer 1

这个是我的css class="cjgl_cd2"
cjgl_cd2{width:195px; margin:0 auto; height:auto;}
.cjgl_cd2 li{width:193px; text-align:center; height:27px; line-height:27px; font-size:14px; font-weight:bold; background:url(/images/licd.gif) no-repeat; }

Answer 2

楼主你这样加就可以了 
<ul id="listUL cjgl_cd2" >
    
        <li><a href="#">News</a>
            <ul class="myHide">
                <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
    </ul>不需要加2个class 否则会覆盖掉前面那个

Answer 3

页面报错 可以这么写吗？<ul id="listUL cjgl_cd2" >

Answer 4

我怎么能把#navigation ul li ul.myHide{
    display:none;
}
#navigation ul li ul.myShow{
    display:block;
}
加到我的css里面去？

Answer 5

对不起我看错了 我以为你是2个class  汗 那个是ID  这样写肯定是不行的   那是因为你js在判断时候就给你加上了class  把你些的覆盖了 如果你要个默认的class可以把js这段改掉：
<script >
function change(){
    //通过父元素li，找到兄弟元素ul
    var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
    //CSS交替更换来实现显、隐
    if(oSecondDiv.className == "myHide")
        oSecondDiv.className = "myShow cjgl_cd2";
    else
        oSecondDiv.className = "myHide cjgl_cd2";
}
window.onload = function(){
    var oUl = document.getElementById("listUL");
    var aLi = oUl.childNodes;    //子元素
    var oA;
    for(var i=0;i<aLi.length;i++){
        //如果子元素为li，且这个li有子菜单ul
        if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
            oA = aLi[i].firstChild;    //找到超链接
            oA.onclick = change;    //动态添加点击函数
        }
    }
}
</script>

Answer 6

你试试 就是不管 它是不是隐藏我都将ul 的class加上了cjgl_cd2

Answer 7

嗯  你是想载入的时候有就 那个class是吧  ==我改下<script >
function change(){
    //通过父元素li，找到兄弟元素ul
    var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
    //CSS交替更换来实现显、隐
    if(oSecondDiv.className == "myHide")
        oSecondDiv.className = "myShow cjgl_cd2";
    else
        oSecondDiv.className = "myHide cjgl_cd2";
}
window.onload = function(){
    var oUl = document.getElementById("listUL"); 
    oUl.className="cjgl_cd2";
    var aLi = oUl.childNodes;    //子元素
    var oA;
    for(var i=0;i<aLi.length;i++){
        //如果子元素为li，且这个li有子菜单ul
        if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
            oA = aLi[i].firstChild;    //找到超链接
            oA.onclick = change;    //动态添加点击函数
        }
    }
}
</script>
你试试 我这边也不好给你调试

Answer 8

把你相关的 代码 和css给我吧 我给你调试了发给你邮箱留给我

Answer 9

jsp页面
 <%@ page contentType="text/html;charset=UTF-8" import="com.ddl.util.Tools,com.ddl.ec.base.session.*"%> 
 <style>
<!--#navigation {
width:200px;
font-family:Arial;
}#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script >
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}
</script>
 <% 
    String adminname=(String)session.getAttribute(ConstantUtils.Adminname);
    String adminrole=(String)session.getAttribute(ConstantUtils.adminrole);    
 %>
     <ul class="cjgl_topys">
      <li style="font-size:14px;"><span class="wzjc"><%=adminname%></span> 　您好！</li>
      <li class="jcys xhx"><a href="/adminuser.do?method=ModifyPassword">[修改密码]</a>　　<a href="/adminuser.do?method=destroy">[退出登录]</a></li>
    </ul>
    <%if(adminrole.toString().equals("53")){%>
    <ul class="cjgl_cd">
      <li><a href="/adminuser.do?method=getuser">用户管理</a></li>
      <li><a href="/judgmentask.do?method=ExamQuestion">试题管理</a></li>
      <li><a href="/model.do?method=mblist">模板管理</a></li>
      <li>考试管理</li>
    </ul>    <div class="cjgl_lj">
    <a href="/exam.do?method=examlist">考场安排 </a> 
    <a href="/exam.do?method=getCJ">成绩管理 </a></div>
    <ul class="cjgl_cd2">
      <li>信息管理</li>
    </ul>
    <div class="cjgl_lj"><a href="/studentuser.do?method=getuser">学员信息 </a> <a href="/news.do?method=getbulletin">公告信息 </a><a href="/news.do?method=getuser" >新闻信息 </a></div>
    <ul class="cjgl_cd2">
      <li><a href="/classification.do?method=getuser">类别管理</a></li>
    </ul>
       
        <div id="navigation">
<ul id="listUL" class="cjgl_cd2">

<li ><a href="#">News</a>
         <ul class="myHide">
             <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
</ul>
</div>
    <!--ul class="cjgl_cd2">
      <li><a href="/upload.do?method=uploadfile">公共上传</a></li>
    </ul-->
    <%}else{%>
     <ul class="cjgl_cd">
      <li>考试管理</li>
    </ul>
    <div class="cjgl_lj">
    <a href="/exam.do?method=getCJ">成绩管理 </a></div>
    <ul class="cjgl_cd2">
      <li>信息管理</li>
    </ul>
    <div class="cjgl_lj"><a href="/studentuser.do?method=getuser">学员信息 </a>
    </div>
   <%}%>

Answer 10

css：/*cjgl*/
.cjgl_left{width:223px; background:#ebf9ff; border:1px solid #c8e0fb; float:left; overflow:hidden; height:auto;}
.cjgl_right{width:723px; background:#fff; border:1px solid #c8e0fb; float:right; overflow:hidden; height:auto;}
.cjgl_topys{text-align:center; padding-top:15px;}
.cjgl_topys li{height:28px;}
.xhx{border-bottom:1px dashed #000;}
.cjgl_cd{padding-top:20px; width:195px; margin:0 auto; height:auto;}
.cjgl_cd li{width:193px; text-align:center; height:27px; line-height:27px; padding-top:10px; font-size:14px; font-weight:bold; background:url(/images/licd.gif) no-repeat; background-position:left 10px;}
.cjgl_cd2{width:195px; margin:0 auto; height:auto;}
.cjgl_cd2 li{width:193px; text-align:center; height:27px; line-height:27px; font-size:14px; font-weight:bold; background:url(/images/licd.gif) no-repeat; }
.cjgl_lj a{width:193px; display:block; background:#fff; height:23px; border-bottom:1px dashed #ccc; padding-top:5px; margin:0 auto; text-align:center;}

Answer 11

崩溃了！  你生成下了 给我个xhtml的吧 jsp的你给我 我没法给你看！

Answer 12

html：<style>
<!--#navigation {
width:200px;
font-family:Arial;
}#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script >
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}
</script><body>
<div id="navigation">
<ul id="listUL">

<li><a href="#">News</a>
         <ul class="myHide">
             <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
</ul>
</div>
</body>
</html>麻烦你给我把cjgl_cd2这个样式给我添加上就行

Answer 13

 <ul class="cjgl_cd2">cjgl_cd2是css文件里面的

Answer 14

哎 我终于知道你的问题了 
这个是你css样式的问题你给li加上高度 了 而li里面的ul也是属于li的这样的话 可以会出现你说的问题了

Answer 15

.cjgl_cd2{width:195px; margin:0 auto; height:auto;} 
.cjgl_cd2 li{width:193px;text-align:center; min-height:27px; line-height:27px; font-size:14px; font-weight:bold; background:url(/images/licd.gif) no-repeat; }
不过min-height在IE6是不行的 希望我没理解错你的意思我在JS里面给你改下了一起发给你吧

Answer 16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--#navigation {
width:200px;
font-family:Arial;
}#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}.cjgl_cd2{width:195px; margin:0 auto; height:auto;} 
.cjgl_cd2 li{width:193px;text-align:center;height:27px; line-height:27px; font-size:14px; font-weight:bold; background:url(/images/licd.gif) no-repeat; }
-->
</style>
<script >
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
aLi[i].style.height = "auto";
oA.onclick = change; //动态添加点击函数
}
}
}
</script>
</head><body>
<div id="navigation">
<ul id="listUL" class="cjgl_cd2">
<li><a href="#">News</a>
   <ul class="myHide">
   <li><a href="#">Lastest News</a></li>
   <li><a href="#">All News</a></li>
   </ul>
  </li>
    <li><a href="#">News1</a></li>
    <li><a href="#">News2</a>
     <ul class="myHide">
   <li><a href="#">Lastest News</a></li>
   <li><a href="#">All News</a></li>
   </ul>
    </li>
    <li><a href="#">News3</a></li>
</ul>
</div>
</body>
</html>

Answer 17

那这个就非常非常麻烦了 因为刷新后你的页面是重载了只有从session或者入手了！