折叠式导航的问题

Question

<script type="text/javascript"> function clk(sid){
for( var i = 1; i < 2; i++ )
{
if ( i != sid )
{
var items = document.getElementById("yc"+i);

if ( items.style.display == "" )
{
items.style.display = "none";
}
}
}

var whichEl= document.getElementById("yc" + sid); 
if(whichEl.style.display== "none") 
{whichEl.style.display="";   } 
else if ( whichEl.style.display == "" )
{whichEl.style.display="none"; }
} 

function showDiv(id)
{
var menu = document.getElementById(id);
menu.style.display="";
}

</script>#Layer3 {
position:absolute;
width:102px;
height:464px;
z-index:2;
left: 0px;
top: 100px;
border:1px solid #0099FF;
background-color:#CCCCCC;

}
ul{
text-align:center;
margin-left:1px;
}
li{
list-style-type:none;
line-height:30px;

}
#menuItem{
width:99px;
height:310px;
}
#menuItem li{
font-size:12px;
}.menu{
border:1px solid;
border-right-color:#00CC33;
border-bottom-color:#00CC33;
border-left-color:#CCCCCC;
border-top-color:#CCCCCC;
background-color:#19A1F6;
font-family:"宋体";
font-size:14px;
}
#yc1{
background-color:#CCCCCC;
border:1px solid #333333;
}
<div id="Layer3">
<ul id="menu">
<li class="menu" onclick="clk(1)" style="cursor:hand">添加书籍</li> 
<div id="yc1" style="display:none">
<ul id="menuItem">
<li>Excel表添加</li> 
<li>添加单本书籍</li>
</ul>
</div> 
<li class="menu" onclick="" style="cursor:hand">删除书籍</li>
<li class="menu" onclick="" style="cursor:hand">修改书籍</li>
<li class="menu" onclick="" style="cursor:hand">修改密码</li>
</ul> 
  </div>
大虾们来帮我看看这个导航菜单，为什么展开后点击展开的内容的时候会折叠，郁闷了。谢谢大家！！！搞了好几天了，还是没搞好

Answer 1

那是因为当你展开的时候，显示的DIV是属于<li>的，所以你点DIV中的内容，也相当于触发了<li>的onclick了

Answer 2

你改成这样就可以了
<div id="Layer3">
                          <ul id="menu">
  <li>
                <ul class="menu" onclick="clk(1)" style="cursor:hand">添加书籍 </ul>  
                    <div id="yc1" style="display:none">
                    <ul id="menuItem">
                    <li>Excel表添加</li> 
                    <li>添加单本书籍</li>
                    </ul>
                    </div>
                <ul class="menu" onclick="" style="">删除书籍</ul>
                <ul class="menu" onclick="" style="">修改书籍</ul>
                <ul class="menu" onclick="" style="">修改密码</ul>        
               
</li>
 </ul> 
  </div>

Answer 3

<style>
#Layer3 {
    position:absolute;
    width:102px;
    height:464px;
    z-index:2;
    left: 0px;
    top: 100px;
    border:1px solid #0099FF;
    background-color:#CCCCCC;
    
}
ul{
    text-align:center;
    margin-left:1px;
}    
li{
    list-style-type:none;
    line-height:30px;
    
}
#menuItem{
    width:99px;
    height:310px;
}
#menuItem li{
    font-size:12px;
}.menu{
    border:1px solid;
    border-right-color:#00CC33;
    border-bottom-color:#00CC33;
    border-left-color:#CCCCCC;
    border-top-color:#CCCCCC;
    background-color:#19A1F6;
    font-family:"宋体";
    font-size:14px;
}
#yc1{
    background-color:#CCCCCC;
    border:1px solid #333333;
}.menu a{TEXT-DECORATION: none;display:block;display:block;}
.menu a:hover{color:#fff}</style><script type="text/javascript">function clk(sid){
    for( var i = 1; i < 2; i++ ){
        if ( i != sid ){
            var items = document.getElementById("yc"+i);
//            if ( items.style.display == "" )
                items.style.display = "none";
        }
    }
    
    var whichEl= document.getElementById("yc" + sid); 
    if(whichEl.style.display== "none")whichEl.style.display=""; 
    else if ( whichEl.style.display == "" )whichEl.style.display="none";
} 
    
function showDiv(id) {
    var menu = document.getElementById(id);
    menu.style.display="";
}
    
</script><div id="Layer3">
           <ul id="menu">
                <li class="menu"><a hideFocus onclick="clk(1)"  href="###">添加书籍</a></li> 
                    <div id="yc1" style="display:none">
                    <ul id="menuItem">
                    <li>Excel表添加</li> 
                    <li>添加单本书籍</li>
                    </ul>
                    </div> 
                <li class="menu" onclick="" style="cursor:hand">删除书籍</li>
                <li class="menu" onclick="" style="cursor:hand">修改书籍</li>
                <li class="menu" onclick="" style="cursor:hand">修改密码</li>        
            </ul> 
  </div>

Answer 4

小改一下^_^<div id="Layer3">
           <ul id="menu">
                <li class="menu"><a hideFocus onclick="clk(1)"  href="###">添加书籍</a></li> 
                    <div id="yc1" style="display:none">
                    <ul id="menuItem">
                    <li>Excel表添加</li> 
                    <li>添加单本书籍</li>
                    </ul>
                    </div> 
                <li class="menu"><a hideFocus onclick=""  href="###">删除书籍</a></li>
                <li class="menu"><a hideFocus onclick=""  href="###">修改书籍</a></li>
                <li class="menu"><a hideFocus onclick=""  href="###">修改密码</a></li>        
            </ul> 
  </div>