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

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

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

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. 求帮助！如何用javascript和jquery做一个图片滚动框！如上图
  3. JSP学习(1)
  4. js图片幻灯机切换效果
  5. 求QQ邮箱随身盘图片浏览全套代码,该如何解决
  6. js 兑现的拖拽功能
  7. 求高手指导！该如何处理
  8. （100分悬赏）跪求jsp页面控件内文字方向设置有关问题解决方案
  9. 将js对象变换为json字符串