1. 爱易网页
  2. JavaSript
  3. js菜单的显示与隐藏有关问题

js菜单的显示与隐藏有关问题

日期：2014-05-16　 浏览次数：20488 次

js菜单的显示与隐藏问题
<ul id="menu_banner">
  <li id="menu_product">
  <a href="#" class="menu_title" onclick="showitem()">产品管理</a>
  <ul class="menu_list">
  <li><a href="#">编辑</a></li>
  <li><a href="#">添加新产品</a></li>
  <li><a href="#">分类目录</a></li>
  </ul>
  </li>
  <li id="menu_news">
  <a href="#" class="menu_title" onclick="showitem()">新闻管理</a>
  <ul class="menu_list">
  <li><a href="#">编辑</a></li>
  <li><a href="#">添加新闻</a></li>
  <li><a href="#">分类目录</a></li>
  </ul>
  </li>
<ul>
现在要求点击a标签。显示或隐藏同级的ul内容。这个showitem()函数该如何写？要求兼容FF和IE6

------解决方案--------------------
HTML code

<html>
<head>
<script language="javascript">
function showitem(evt){
   var evnet=window.event||evt;
   var evtsrc=event.srcElement||evt.target;
   if(evtsrc.parentNode.nextSibling) evtsrc.parentNode.nextSibling.style.display="none";
    if(evtsrc.parentNode.previousSibling) evtsrc.parentNode.previousSibling.style.display="none";
}
</script>
</head>
<body >
<ul id="menu_banner"> 
            <li id="menu_product"> 
                <a href="#" class="menu_title" onclick="showitem(event)">产品管理 </a> 
                <ul class="menu_list"> 
                    <li> <a href="#">编辑 </a> </li> 
                    <li> <a href="#">添加新产品 </a> </li> 
                    <li> <a href="#">分类目录 </a> </li> 
                </ul> 
            </li> 
            <li id="menu_news"> 
                <a href="#" class="menu_title" onclick="showitem(event)">新闻管理 </a> 
                <ul class="menu_list"> 
                    <li> <a href="#">编辑 </a> </li> 
                    <li> <a href="#">添加新闻 </a> </li> 
                    <li> <a href="#">分类目录 </a> </li> 
                </ul> 
            </li> 
<ul> 
</body>
</html>

------解决方案--------------------


HTML code

<script type="text/javascript">
<!--
    function showitem(obj) {
        var oparent = document.getElementById("menu_banner");
        var ochild = oparent.getElementsByTagName("ul");
        for(var i = 0; i < ochild.length; i++){
            ochild[i].style.display = "none";
        }
        var oul = obj.parentNode.getElementsByTagName('ul')[0];
        oul.style.display = (oul.style.display == 'none') ? 'block' : 'none';
    }
//-->
</script>
<ul id="menu_banner"> 
            <li id="menu_product"> 
               <span onclick="showitem(this)"> <a href="#" class="menu_title" >产品管理 </a> </span>
                <ul class="menu_list" style="display:

相关资料更多>

  1. JavaScript实现网页元素的拖拽成效
  2. js动态合并单元格（解决即给分）,该如何处理
  3. javascript 根据时间判断周数？该怎么解决
  4. js表单查验
  5. 如何学习extjs4.0啊有点迷茫
  6. Extjs ie6/七/8兼容
  7. JAVA中施用JSONObject对象必备jar
  8. 网页中的window.onscroll事件原来有效，但是把这个网页放到iframe中就没用了解决方案
  9. JSP中include file的有关问题，求