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

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

&lt;html&gt;&lt;head&gt;&lt;script language="javascript"&gt;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";}&lt;/script&gt;&lt;/head&gt;&lt;body &gt;&lt;ul id="menu_banner"&gt;             &lt;li id="menu_product"&gt;                 &lt;a href="#" class="menu_title" onclick="showitem(event)"&gt;产品管理 &lt;/a&gt;                 &lt;ul class="menu_list"&gt;                     &lt;li&gt; &lt;a href="#"&gt;编辑 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;添加新产品 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;分类目录 &lt;/a&gt; &lt;/li&gt;                 &lt;/ul&gt;             &lt;/li&gt;             &lt;li id="menu_news"&gt;                 &lt;a href="#" class="menu_title" onclick="showitem(event)"&gt;新闻管理 &lt;/a&gt;                 &lt;ul class="menu_list"&gt;                     &lt;li&gt; &lt;a href="#"&gt;编辑 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;添加新闻 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;分类目录 &lt;/a&gt; &lt;/li&gt;                 &lt;/ul&gt;             &lt;/li&gt; &lt;ul&gt; &lt;/body&gt;&lt;/html&gt;
[解决办法]
HTML code&lt;script type="text/javascript"&gt;&lt;!--    function showitem(obj) {        var oparent = document.getElementById("menu_banner");        var ochild = oparent.getElementsByTagName("ul");        for(var i = 0; i &lt; ochild.length; i++){            ochild[i].style.display = "none";        }        var oul = obj.parentNode.getElementsByTagName('ul')[0];        oul.style.display = (oul.style.display == 'none') ? 'block' : 'none';    }//--&gt;&lt;/script&gt;&lt;ul id="menu_banner"&gt;             &lt;li id="menu_product"&gt;                &lt;span onclick="showitem(this)"&gt; &lt;a href="#" class="menu_title" &gt;产品管理 &lt;/a&gt; &lt;/span&gt;                &lt;ul class="menu_list" style="display:none"&gt;                     &lt;li&gt; &lt;a href="#"&gt;编辑 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;添加新产品 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;分类目录 &lt;/a&gt; &lt;/li&gt;                 &lt;/ul&gt;             &lt;/li&gt;             &lt;li id="menu_news"&gt;                 &lt;span onclick="showitem(this)"&gt; &lt;a href="#" class="menu_title" &gt;产品管理 &lt;/a&gt; &lt;/span&gt;                &lt;ul class="menu_list" style="display:none"&gt;                     &lt;li&gt; &lt;a href="#"&gt;编辑 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;添加新闻 &lt;/a&gt; &lt;/li&gt;                     &lt;li&gt; &lt;a href="#"&gt;分类目录 &lt;/a&gt; &lt;/li&gt;                 &lt;/ul&gt;             &lt;/li&gt; &lt;ul&gt;

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

热点推荐