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

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

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

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. Extjs TreeFilter 依据关键字过滤树
  2. 在JSP页面展示当前日期或时间
  3. javascript写种方式之五
  4. Ext Grid 相关有关问题，求指点，拜托
  5. javascript 表单重置的有关问题 reset
  6. MyEclipse打开JSP页面时错误
  7. js惯用计量单位转换
  8. JSP 去除缓存
  9. JVM有关问题诊断常用命令：jinfo,j地图,jstack