<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

解决方案 »

  1.   

    要完成此效果需要两个步骤第一步:把如下代码加入到<head>区域中<style>
    <!-- Begin
    .BorderOn  { width:90px;
                 margin-left:10px;
                 border:1px solid #456789 }
    .BorderOff { width:90px;
                 margin-left:0px;
                 border:1px solid #444444 }
    A.mBlue:link      {color:#00CCFF; text-decoration:none;}
    A.mBlue:visited   {color:#00CCFF; text-decoration:none;}
    A.mBlue:active    {color:#00CCFF; text-decoration:none;}
    A.mBlue:hover     {color:#FF0000; text-decoration:underline;}        
    A.mGreen:link     {color:#00FF80; text-decoration:none;}
    A.mGreen:visited  {color:#00FF80; text-decoration:none;}
    A.mGreen:active   {color:#00FF80; text-decoration:none;}
    A.mGreen:hover    {color:#FF0000; text-decoration:underline;} 
    A.mYellow:link    {color:#FFFF00; text-decoration:none;}
    A.mYellow:visited {color:#FFFF00; text-decoration:none;}
    A.mYellow:active  {color:#FFFF00; text-decoration:none;}
    A.mYellow:hover   {color:#FF0000; text-decoration:underline;}          
    //-->             
    </style>
    <script language="JavaScript1.2">
    <!-- Begin
    offMessage = "Add this menu to your site!"
    function boxOn(which,message) {
    if (document.all||document.getElementById) {
    which.className = 'BorderOn';
    if (document.getElementById) {
    document.getElementById("Message").innerHTML = message
    }
    else {
    Message.innerHTML = message;
          }
       }
    }
    function boxOff(which) {
    if (document.all||document.getElementById) {
    which.className = 'BorderOff';
    if (document.getElementById) {
    document.getElementById("Message").innerHTML = offMessage
    }
    else {
    Message.innerHTML = offMessage;
          }
       }
    }
    //  End -->
    </script>第二步:如下代码加入到<body>区域中<table cellpadding="0" cellspacing="0" width="100">
    <tr>
    <td align="center">
    <!-- Header Table // -->
    <table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff">
            <tr bgcolor="#999999"> 
              <td> 
                <div align="center"><font color="#FEDCBA" size="2" face="Arial">主菜单</font></div>
              </td>
    </tr>
    </table>
    <!-- End Header Table //-->
    <!-- Menu Items Tables
       - To add more, just follow the pattern
       - Note class= in each <a href> to attach link style colors
    //-->
    <!-- Menu Item One Table //-->
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Visit the JavaScript Source')" onMouseout="boxOff(this)">
            <tr bgcolor="#999999"> 
              <td> 
                <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="link.htm" target="_blank">分类一</a></font> 
                </div>
              </td>
    </tr>
    </table>  
    <!-- Menu Item Two Table //-->
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 2')" onMouseout="boxOff(this)">
            <tr bgcolor="#999999"> 
              <td> 
                <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="http://free.alixixi.com/" target="_blank">分类二</a></font> 
                </div>
              </td>
    </tr>
    </table>
    <!-- Menu Item Three Table //-->
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 3')" onMouseout="boxOff(this)">  
            <tr bgcolor="#999999"> 
              <td> 
                <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mGreen" href="http://free.alixixi.com/bb/" target="_blank">分类三</a></font></div>
              </td>
    </tr>
    </table>
    <!-- Menu Item Four Table //-->
    <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 4')" onMouseout="boxOff(this)">  
            <tr bgcolor="#999999"> 
              <td> 
                <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mYellow" href="http://free.alixixi.com/ts/" target="_blank">分类四</a></font></div>
              </td>
    </tr>
    </table>
    <!-- End Menu Items Tables //-->
    <!-- Message Table //-->
    <!-- Set the width= of this table the same as the overall width in the <style> //-->
    <table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90">
            <tr bgcolor="#999999"> 
              <td> <!-- Set the width= of this table to the overall width
         in the style table minus 2x the border width; set
         the height= long (large) enough to accommodate your
         longest message //--> 
                <table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100">
                  <tr bgcolor="#999999"> 
                    <td align="left" valign="top"> <font id="Message" color="#CBA987" size="2" face="Arial">Move 
                      your mouse over the menu items.</font> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- End Message Table //-->
    </td>
    </tr>
    </table>
    <a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>
      

  2.   


    <html>
    <head>
    <script language="javascript">
    function showitem(evt){
       var evnet=window.event||evt;
       var evtsrc=event.srcElement||evt.targets
       if(evtsrc.nextSibling) evtsrc.nextSibling.style.display="none";
        if(evtsrc.prevuousSibling) evtsrc.prevuousSibling.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> 
      

  3.   


    <script type="text/javascript">
    <!--
    function showitem(obj) {
    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"> 
                        <li> <a href="#">编辑 </a> </li> 
                        <li> <a href="#">添加新产品 </a> </li> 
                        <li> <a href="#">分类目录 </a> </li> 
                    </ul> 
                </li> 
                <li id="menu_news"> 
                    <span onclick="showitem(this)"> <a href="#" class="menu_title" >产品管理 </a> </span>
                    <ul class="menu_list"> 
                        <li> <a href="#">编辑 </a> </li> 
                        <li> <a href="#">添加新闻 </a> </li> 
                        <li> <a href="#">分类目录 </a> </li> 
                    </ul> 
                </li> 
    <ul> 
      

  4.   

    啊。不好意思。问题写得有点问题:
    重写:
    现在要求点击a标签。只显示同级的ul内容。其它li中的UL隐藏,这个showitem()函数该如何写?要求兼容FF和IE6
      

  5.   


    <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> 
      

  6.   

    to:BeenZ,无法运行。错误提示:
    event is not defined
    showitem(click clientX=84, clientY=69)menu.aspx (第 12 行)
    onclick()menu.aspx (第 1 行)
    [Break on this error] var evtsrc = event.srcElement || evt.target;\r\n
      

  7.   


    <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:none"> 
                        <li> <a href="#">编辑 </a> </li> 
                        <li> <a href="#">添加新产品 </a> </li> 
                        <li> <a href="#">分类目录 </a> </li> 
                    </ul> 
                </li> 
                <li id="menu_news"> 
                    <span onclick="showitem(this)"> <a href="#" class="menu_title" >产品管理 </a> </span>
                    <ul class="menu_list" style="display:none"> 
                        <li> <a href="#">编辑 </a> </li> 
                        <li> <a href="#">添加新闻 </a> </li> 
                        <li> <a href="#">分类目录 </a> </li> 
                    </ul> 
                </li> 
    <ul>