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

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

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

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. 求正则表达式。解决方法
  2. js解析 XML 字符串 - 跨浏览器范例
  3. extjs项目断网，图片展示不全
  4. Java 跟JSP 传输编码格式 乱码
  5. JavaScript：The Good Parts （4）
  6. JSON-lib学习(1)搭建json-lib环境
  7. jsp网页漫笔
  8. struts2引语配置json使用ajax原理
  9. 请问Javascript关于onmouseover事件的有关问题