类似书签栏效果

原创 cheese奶酪凌 随笔 小案例 236阅读 2018-01-26 10:28:35 举报

纯粹记录,欢迎大神指点。
根据设计图写的,原先碰到的时候,想的很简单,纯静态,直接在列表中加入嵌套层,形成下拉,后面实现的时候,发现效果极差!首先,我不知道我保存的数据的长度大小,我不知道我能保存的长度大小,只是强制的限定了。
这一次,用了jquery的方法进行尝试(jq,js技术依旧差)

类似书签栏效果
A:浏览器中书签栏,最前面一部分是固定的,显示浏览器你登录的信息(登录名+礼包);
B:你保存的书签(保存的数据)
C:当你保存的数据过多,超出B的区域,则会出现C和D;
D:保存的数据,点击C的时候出现

html 代码

jqury部分:
window.onload = function(){
// 一级栏目宽度
var Wtitle = $(".ien_nav-title").innerWidth();
// 子级导航长度
var Wlist = $(".ien_nav-list").innerWidth();
// 一级栏目所占百分比
var Pleft = (Wtitle/Wlist)*100+1+"%";
// 一级栏目的宽度显示
$(".ien_nav-list").css("padding-left",Pleft);
// 二级栏目所占空间宽度
var Wnavul = Wlist - Wtitle;
// ien_nav-ul中li的宽度和
var sumWidth =0;
var Lli = $(".ien_nav-list .ien_nav-ul li").length;
var Oli = $(".ien_nav-list .ien_nav-ul li");

        for (var i = 0; i < Lli; i++) {

           var cliWidth = Oli[i].clientWidth;
           sumWidth += cliWidth;
           // 能占用的空间宽度
           var Wrema = Wnavul-sumWidth; 

           if(Wrema<=0){
                $(".ien_nav-list .ien_nav-ul li").eq(i).before("<li class='arrow'></li>");
                $(".ien_nav-list .ien_nav-ul li.arrow").click(function(){
                    $(".mlist").toggle();
                });

                for(var j=0; j < Lli; j++){
                    var z = i+j+1; 
                    $(".ien_nav-list .ien_nav-ul li").eq(z).addClass("end");
                    if(z>Lli){
                        console.log($(".ien_nav-list .ien_nav-ul li.end").length)
                        if( $(".ien_nav-list .ien_nav-ul li").hasClass("end")){
                            $("li.end").clone().appendTo("#mlist");
                            $(".ien_nav-list .ien_nav-ul li.end").remove();
                        } 
                        return false;
                    }
                }

           }
        }

    }

ps:嵌套太多,容易搞混,不易于优化维护;当然,我知道这些是因为我尝试在其他地方使用的时候发现了问题。。

有好的意见建议,麻烦各位留言!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复