您的位置:首页> 日志> 动易系统 正文

当信息公开客户需要多种类别分类时,而在跳转页面后能实现定位到确定某个分类下效果!如下图:

经过考虑以后决定利用已有的superslide库效果以简洁和避免引用多种js效果库前提下实现此效果:

HTML结构如下:

<dl id="xxgkMenu">
            <dt><h4>按组配分类</h4></dt>
            <dd>
                <ul>
                    {PE.Label id="PE部门主题公开目录列表" currentId="0" /}
                </ul>
            </dd>
            <dt><h4>按主题分类</h4></dt>
            <dd style="display: none;">
                <!-- 菜单循环 S -->
                <ul>
                    {PE.Label id="PE部门主题公开目录列表-扩展字段版" fieldname="theme" currentId="0" /}
                </ul>
                <!-- 菜单循环 E -->
            </dd>
            <dt><h4>按服务对象分类</h4></dt>
            <dd style="display: none;">
                <!-- 菜单循环 S -->
                <ul>
                    {PE.Label id="PE部门主题公开目录列表-扩展字段版" fieldname="service" currentId="0"/}
                </ul>
                <!-- 菜单循环 E -->
            </dd>
            <dt><h4>按体裁分类</h4></dt>
            <dd style="display: none;">
                <!-- 菜单循环 S -->
                <ul>
                    {PE.Label id="PE部门主题公开目录列表-扩展字段版" fieldname="genre" currentId="0"/}
                </ul>
                <!-- 菜单循环 E -->
            </dd>
        </dl>
 

js代码如下:

<script type="text/javascript">
          jQuery(function($){
            var index =$("#currentNode").parents("dd").index();
            var index= ((index+1)/2)-1;
            var index = index <0?0:index;
            jQuery("#xxgkMenu").slide({titCell:"dt", targetCell:"dd",defaultIndex:index,effect:"slideDown",delayTime:300,trigger:"click"});
            });
        </script>
 
解析:
var index =$("#currentNode").parents("dd").index();
获取id=currentNode 元素父栏目(dd)的索引;
 
 var index= ((index+1)/2)-1;
根据HTML结构发现对应父栏目dt跟dd索引的数学关系;然后进行处理得出对应正确的值;
 
var index = index <0?0:index;
利用三元运算符判断一下当index小于0时直接设置index=0;
 
最后将index 值传递给defaultIndex,完工