实现点击菜单栏a链接之后,其分类框不关闭

因为点击链接进入一个新的页面,所以如果直接写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>

猜你喜欢

转载自blog.csdn.net/qq_37815596/article/details/81483869