默许隐蔽左边菜单的要领

公司一项目须要默许隐蔽框架的左边菜单,遇到了一些题目,下面扼要纪录题目的处置惩罚历程,以备后续检察、参考。

这个题目看似很简单,只须要找到对应的js和css,设置左边菜单不显现或许默许点击一次即可。
沿着上面的思绪,我改出了初版:

    $(document).ready(function() {
        $("#menu a.menu").click(function(){
            $("#menu li.menu").removeClass("active");
            $(this).parent().addClass("active");
            if($("#openClose").hasClass("close")){
                $("#openClose").click();
            }
        });
        if($("#openClose").hasClass("close")){
            $("#openClose").click();
        }
    });

经测试,修正未经由过程。在上岸胜利,跳转到这个页面时会显著看出左边菜单的渐默。

从上次修正中能够看出,左边菜单是默许显现的。因为js完成的效果不符合需求,只能改css了。

  1. 设置菜单默许隐蔽 <div id="left" style="display: none">

  2. 转变掌握元素的状况:’close’ to ‘open’ <div id="openClose" class="open">&nbsp;</div>

  3. 转变右边内容内容页的默许宽度(原宽度=总宽度-左边-掌握元素) $("#right").width($("#content").width()-$("#openClose").width()-5);

做到这里觉得照样蛮轻松的,测试也没有显著的题目。事变总有重复,bug也是出人意表,在Firfox下全部页面只要顶部菜单栏能够一般显现。
题目在这儿变得有点麻烦了,浏览器兼容性很难处置惩罚。

CSS display 属性只定义了值为’none’时,对应元素不在页面显现,并没有范例浏览器的完成。
网上的搜刮效果也没有相干题目的处置惩罚方案,只能本身想办法了。

既然只在Firfox下有题目,则推断浏览器厂商,做特别处置惩罚,代码以下:

if($.browser.mozilla){
    
}; 

应用FirBug的检察器可知,右边页面iframe的src为空,且左边菜单虽未显现,但内容已加载完成。晓得题目症结所在,就好处置惩罚了。
找出默许菜单,获得菜单链接,为右边页面iframe的src赋值。

$(document).ready(function() {
    if($.browser.mozilla){
        $("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));
    }; 
    $("#menu a.menu").click(function(){
        $("#menu li.menu").removeClass("active");
        $(this).parent().addClass("active");
        if($("#openClose").hasClass("close")){
            $("#openClose").click();
        }
        if($.browser.mozilla){
        $("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));
    }; 
    });
});

但题目照样没有处置惩罚,切换菜单滞后。在点击切换菜单后页面没有反应,在第二次点击切换菜单时才会跳转获得第一次要跳转的菜单,或许说是切换菜单须要单击两次。
这类状况应该是猎取默许菜单url的机遇不对,应该在左边菜单切换完成后猎取。在菜单绑定的单击要领中,左边菜单的内容并没有完成革新。
查资料可知,iframe有一个加载完成事宜,恰好能够用在这里。终究代码以下:

$(document).ready(function() {
    $("#menu a.menu").click(function(){
        $("#menu li.menu").removeClass("active");
        $(this).parent().addClass("active");
        if($("#openClose").hasClass("close")){
            $("#openClose").click();
        }
    });
    
    if($.browser.mozilla){
        $("#menuFrame").on("load",function(){
            $("#mainFrame").attr("src",$("#menuFrame").contents().find("li.active :first-child").attr("href"));
        });
    }; 
});

经测试,没有bug,这个题目也就处置惩罚了。

    原文作者:团结
    原文地址: https://segmentfault.com/a/1190000005337166
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞