在ecshop做的一个网站中，首页的所有商品分类挡住了后面的首页滚动广告，希望能够鼠标放上去，显示，不放上去，就自动隐藏。

这个功能，看起来很容易，原本以为，几分钟的事情。结果做起来，发现还经历了一些小曲折。最终实现效果如下。

左侧为鼠标没放上去的时候，菜单自动隐藏。右侧为鼠标放上去后，菜单自动显示。

事件从 onclick修改为onMouseOver，onMouseOut即可。

这样完成后，感觉大功告成了，结果一试验，发现还有问题。这样做，只是把菜单中的第一条隐藏了。其他的还一直在显示。随后，对js中的sw_navTest进行了改造。终于搞定。

现在仍有一个疑问。即，虽然实现了，但是并不明白原理。

最终实现结果如下。

在category_tree_index.lbi 文件中进行修改。

在<script type="text/javascript"></script>之间再增加一个js函数。

我命名为sw_navTest(),大家可以根据要求自己来定。函数内容如下：

  function sw_navTest(obj)
  {
  var a = document.getElementsByName(obj);
    var num=0;
    for (i=0; i<=a.length; i++){
        var cat =a[i];
        if (cat){
 if(cat.style.visibility == "hidden")
 {
 cat.style.visibility = "visible";
 }
 else
 {
 cat.style.visibility = "hidden";
 }
            }                           
        }
  }

在另一部分中修改后如下：

<div id="category_tree" onMouseOver ="sw_navTest(1)"  onMouseOut="sw_navTest(1)" >
<dl class="clearfix">
<div class="mainCategory">
    <h2><a href="http://blog.csdn.net/kllsg/article/details/search.php" target="_blank">所有商品分类</a></h2>
    </div>
    <!--{foreach from=$categories item=cat name=no}-->
<div class="dt" name="1" style="visibility:hidden;" >
    <div  {if $smarty.foreach.no.iteration eq 9}style="border-bottom:none;"{/if} onMouseOver="sw_nav2({$smarty.foreach.no.iteration},1);" onMouseOut="sw_nav2({$smarty.foreach.no.iteration},0);" >
        <div id="HandleLI2_{$smarty.foreach.no.iteration}"><a class="a {if $smarty.foreach.no.index mod 2 eq 0}{else}t{/if}" href="http://blog.csdn.net/kllsg/article/details/{$cat.url}">{$cat.name|escape:html}<i></i></a></div>
            <dd id=DisSub2_{$smarty.foreach.no.iteration} style="display:none">
                <!--{foreach from=$cat.cat_id item=child}-->
                <a class="over_2" href="http://blog.csdn.net/kllsg/article/details/{$child.url}">{$child.name|escape:html}</a>
                <div class="clearfix">
                    <!--{foreach from=$child.cat_id item=childer}-->
                    <a class="over_3" href="http://blog.csdn.net/kllsg/article/details/{$childer.url}">{$childer.name|escape:html}</a>
                    <!--{/foreach}-->
                </div>
                <!--{/foreach}-->
            </dd> 
</div>
</div>
    <!--{/foreach}--> 
</dl>
</div>

主要在id="category_tree" 这个div中增加了鼠标事件。另外命名了div名字为1，并默认为隐藏。

这里要说明一下。没看到这个命名为1的div有循环呀，为什么第一次将这个div的id命名为1，且响应函数中只处理一次的时候，发现，只有一个一级菜单被隐藏。后来改为名字为1，并且进行了循环后，才达到理想效果。

这里还要以后研究，大家如果知道请留言告知。

这样，就基本实现了ecshop首页的“全部商品分类”自动显示和隐藏的功能。

整个过程进展还算顺利，主要感谢各位大神在网上的分享。将整个过程记录下来。也希望能帮到需要的人。