西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > ecshop教程 >

Ecshop首页中"所有商品分类"的自动隐藏功能

时间:2016-11-27 00:48来源:未知 作者:好模板 点击:
在ecshop做的一个网站中,首页的所有商品分类挡住了后面的首页滚动广告,希望能够鼠标放上去,显示,不放上去,就自动隐藏。 这个功能,看起来很容易,原本以为,几分钟的事情。

在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首页的“全部商品分类”自动显示和隐藏的功能。

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

(责任编辑:好模板)
顶一下
(3)
100%
踩一下
(0)
0%
------分隔线----------------------------