1.制作一个分类框2.实现点击菜单栏a链接之后，其分类框不关闭

1.

css代码

<style type="text/css">
        .open{display: block!important;}
    </style>

html代码

<a href="" class="all">All</a>
    <ul class="nav_left">
        foreach name="proType" item="vo"}
            {if condition="$vo.pid eq 0"}
                <li class="li_one" data-id="{$vo.id}" style="position: relative;">                    
                    <h4><a href="/product/list/id/{$vo.id}" style="font-size: 16px;color: #000;font-weight: normal;border-bottom: 1px solid #f2f2f2;display: block;padding: 15px;">{$vo.name}</a>
                    </h4>
                    <em class="addem" style="font-style: normal;position: absolute;right: 20px;top: 15px;cursor: pointer;font-weight: bold;">+</em>
                    <ul class="ulbox" style="display: none;">
                        {foreach name="proType" item="vos"}
                            {if condition="$vos.pid eq $vo.id"}
                                <li class="opena" data-id="{$vos.id}" style="position: relative;">
                                    <em class="bigem" style="font-style: normal;position: absolute;left: 15px;top: 15px;cursor: pointer;font-weight: bold;">></em>
                                    <a href="/product/list/id/{$vos.id}" style="padding: 0;color: #4c4c4c;display: block;font-size: 16px;padding: 15px;border-bottom: 1px solid #f2f2f2;margin-left: 10px;">{$vos.name}</a>
                                    <ul class="ulbox2" style="display: none;">
                                        {foreach name="proType" item="voss"}
                                            {if condition="$voss.pid eq $vos.id"}
                                                <li data-id="{$voss.id}">
                                                    <a href="/product/list/id/{$voss.id}" style="display: block;font-size: 16px;padding: 5px 25px;">{$voss.name}</a>
                                                </li>
                                            {/if}
                                        {/foreach}
                                    </ul>
                                </li>
                            {/if}
                        {/foreach}
                    </ul>   
                </li>
            {/if}        
        {/foreach}
    </ul>
</div>

js代码

    <script type="text/javascript">
        $(function(){
            $(".addem").click(function() {
                if($(this).siblings(".ulbox").hasClass("open")){
                    $(this).siblings(".ulbox").removeClass('open');
                    $(this).html("+");
                }else{
                    $(this).siblings(".ulbox").addClass('open');
                    $(this).html("-");
                    $(".bigem").click(function() {
                        if($(this).siblings(".ulbox2").hasClass("open")){
                            $(this).siblings(".ulbox2").removeClass('open');
                            $(this).html(">");
                        }else{
                            $(this).siblings(".ulbox2").addClass('open');
                            $(this).html("v");
                        }
                    });
                }
            });
        })
    </script>

2.

因为点击链接进入一个新的页面，所以如果直接写js进行更改不能起到作用，所以需要如下两种方案

方案一：设置包含二级分类的Ul标签，默认情况下设置ul为display:block；然后点击链接之后，Ul就不会自动关闭了。

方案二：判断当前a链接id号，如果链接与网页链接相同，则再写js

一、了解indexof()结果标识 1、0、-1

1.是被比较的字符串具有比较的字符串，所得结果返回为 1或者0，这是返回的存在这个字符串的起始位置第0位开始，或者第1位开始出现这个字符串
2.空字符串和空字符串做比较，返回的还是0
3.是和一个不存在的字符串做比较，返回的是-1
如果说，我们已经可以预知两种结果中的特殊标志位，就是返回的string中要么有 "right"，要么就是"false"，这样的字段，那可显然，可以直接让string的串和right来一个indexOf("right"),如果返回为0或者大于0的整数，说明返回的是正确的结果，否则，也就是等于  -1 时，就是错误的string串了，当然，使用表示"false"字段的比较也是可以的。

粘贴部分相关html代码
<li class="li_one" data-id="{$vo.id}"><!-- data-* 属性用于存储页面或应用程序的私有自定义数据 -->                    
    <a href="/product/list/id/{$vo.id}">{$vo.name}</a>
    <div class="des active">
        <span class="glyphicon glyphicon-chevron-right"></span>   
        <span class="glyphicon glyphicon-chevron-down"></span>       
    </div>
    <ul class="ulbox">
        {foreach name="proType" item="vos"}
            {if condition="$vos.pid eq $vo.id"}
                <li data-id="{$vos.id}"><!-- data-* 属性用于存储页面或应用程序的私有自定义数据 -->
                    <a href="/product/list/id/{$vos.id}">{$vos.nickname}</a>
                </li>
            {/if}
        {/foreach}
    </ul>   
</li>

粘贴部分相关js代码
<script>
    window.onload=function(){
        var url = location.href;//"location.href"是本页面跳转链接
        if(url.indexOf("id")===-1){//indexOf() 方法===-1表示当前页面跳转链接中不存在id
            sessionStorage.listIndex=0;//sessionStorage用来存储客户端临时信息
        }
        var id = url.substring(url.indexOf("id")+3);//substring() 方法用于提取字符串中介于两个指定下标之间的字符。此段代码实现截取网页跳转链接后的id/后的id号.
        $('.'+id).click(function(){
            sessionStorage.listIndex=$(this).index();//index() 方法返回指定元素相对于其他指定元素的index位置。也就是返回id号
        })
        if(sessionStorage.listIndex!==null){//如果当前点击元素的id号不为空
            if($("[data-id = "+id+"]").children(".ulbox").length !== 0){
                $("[data-id = "+id+"]").find(".ulbox").css("display","block");
                $("[data-id = "+id+"]").find(".des").removeClass('active');
            }else{
                $("[data-id = "+id+"]").parent().css("display","block");
                $("[data-id = "+id+"]").parent().siblings(".des").removeClass('active');
             }
        }
    };
</script>