关于首页菜单页面的设计以及遇到的click事件重复点击的bug问题

首页菜单

　　用的框架技术：bootstrap、bootstrap-treeView

　　

一级菜单

　　特殊功能一：

　　　　介绍：当用户配置的菜单数过多的时候，如果每一个li设置了浮动，那么将会出现菜单换行，造成不好的用户体验，所以此处设计了一个如下的可以点击左右伸缩的功能

　　　　如何实现：通过条件修改ul的margin-left的值

　　　　　　css部分：大致设计三层（具体依据情况而定），最为层的div宽度为100%根据屏幕的宽度，设置样式为overflow：hidden，ul设置一个很大的宽度例如4000，ul,li不要浮动，设置display:inline-block;去除空白节点

　　　　　　js部分：

　　　　　　　　为左右的图标绑定点击事件，当条件满足的时候修改ul的margin-left的值

遇到的问题一（css与js不同步）：

本来这个过程挺简单，但是因为出于更好的用户体检，在这个左右移动的过程中，加上了一个css的动画效果（transition:margin-left .3s），问题就出现了，因为在js跟css不是同步执行，当js执行完之后，css移动margin-left移动完成，导致js后面执行的时候取到的margin-left的值有问题，导致判断的不正确，因为在移动完之后，执行一个检查左右图标是否显示的方法用到了margin-left的值

解决办法：定时器，既然css部分执行慢，那我们就等css移动完之后在执行 checkshow的方法

       setTimeout(function(){
            checkShow();
        },333);

为什么选择333，因为css过渡的时间是300ms，这个时间必须算上，加上定时器的最小单位是20ms，再加上一点宽裕的时间

遇到的问题二（连续点击执行多次）：

连续点击两次的时候，ul移动还没有移动完，在持续点击就会移动两倍的距离，如下

解决办法：加上判断，如果-去值为负数的时候，就把值设置0

        if(margin<0){
            //获得ul marginleft的值，向右移动300px;
            var mg=Math.floor(margin+300);
            mg=mg>-10?0:mg;
            $("#nav .h-fluid ul").css("margin-left",mg+"px");
        }

这样问题就完美解决，但是还有一个原因就因为双击的时候执行了两个click的事件，在项目中的时候有时候不需要这样

如何解决双击的时候click执行了两次

解决办法：用一个函数包裹事件，通过条件去绑定点击事件，执行了一次就立刻把自己解除绑定，代码附上

 //点左图标向右移动
function moveLeftCycle(){
   $("#leftIcon>span").off('click').on("click","",function(e){
        var fluidWidth=parseFloat($("#nav .h-fluid").css("width"));
        var ulWidth=parseFloat($("#nav .h-fluid ul").css("width"));
        var margin=parseFloat($("#nav .h-fluid ul").css("margin-left"));
        if(margin<0){
            //获得ul marginleft的值，向右移动300px;
            var mg=Math.floor(margin+300);
            mg=mg>-10?0:mg;
            $("#nav .h-fluid ul").css("margin-left",mg+"px");
        }
        $("#leftIcon>span").off('click');//解除绑定
        setTimeout(function(){
            checkShow();
        },333);
   });
}
 //点右图标向左移动
function moveRightCycle(){
    $("#rightIcon>span").off('click').click(function(){
        var fluidWidth=parseFloat($("#nav .h-fluid").css("width"));
        var ulWidth=parseFloat($("#nav .h-fluid ul").css("width"));
        var margin=parseFloat($("#nav .h-fluid ul").css("margin-left"));
        if(fluidWidth<(ulWidth+margin)){
            //获得ul marginleft的值，向左移动300px;
            $("#nav .h-fluid ul").css("margin-left",Math.floor(margin-300)+"px");
        }
        $("#rightIcon>span").off('click');//解除绑定
       setTimeout(function(){
            checkShow();
        },333);
    })
}
function checkShow(){
    var fluidWidth=Math.floor(parseFloat($("#nav .h-fluid").css("width")));
    var ulWidth=Math.floor(parseFloat($("#nav .h-fluid ul").css("width")));
    var margin=Math.floor(parseFloat($("#nav .h-fluid ul").css("margin-left")));
    if(fluidWidth>=ulWidth){
        //两个都隐藏
        $("#rightIcon").hide();
        $("#leftIcon").hide();
        $("#nav .h-fluid ul").css("margin-left","0px");
    }else{
        //两种情况
        if(fluidWidth<Math.floor(ulWidth+margin)){
            moveRightCycle();//满足条件的时候再绑定事件
            //右边的图标显示
            $("#rightIcon").show();
        }else{
            $("#rightIcon").hide();
        }
        if(margin<0){
            moveLeftCycle();//满足条件的时候再绑定事件
            //左边的图标显示
            $("#leftIcon").show();
        }else{
            $("#leftIcon").hide();
        }
    }
}