默认隐藏左侧菜单的方法_html/css_WEB-ITnose

公司一项目需要默认隐藏框架的左侧菜单,遇到了一些问题,下面简要记录问题的解决过程,以备后续查看、参考。

这个问题看似很简单,只需要找到对应的js和css,设置左侧菜单不显示或者默认点击一次即可。沿着上面的思路,我改出了第一版:

  1.     $(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. $("#right").width($("#content").width()-$("#openClose").width()-5);

登录后复制

做到这里感觉还是蛮轻松的,测试也没有明显的问题。事情总有反复,bug也是出人意料,在Firfox下整个页面只有顶部菜单栏可以正常显示。问题在这儿变得有点麻烦了,浏览器兼容性很难解决。

立即学习“前端免费学习笔记(深入)”;

CSS display 属性只定义了值为’none’时,对应元素不在页面显示,并没有规范浏览器的实现。

网上的搜索结果也没有相关问题的解决方案,只能自己想办法了。

既然只在Firfox下有问题,则判断浏览器厂商,做特殊处理,代码如下:

  1. if($.browser.mozilla){    };

登录后复制

利用FirBug的查看器可知,右侧页面iframe的src为空,且左侧菜单虽未显示,但内容已加载完成。知道问题症结所在,就好解决了。找出默认菜单,取得菜单链接,为右侧页面iframe的src赋值。

  1. $(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有一个加载完成事件,正好可以用在这里。最终代码如下:

  1. $(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,这个问题也就解决了。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    我的前端之路:从切图到放弃_html/css_WEB-ITnose

    2025-3-29 14:13:03

    编程技术

    网页框架做好!上内容好难啊,怎么也找不到感觉,_html/css_WEB-ITnose

    2025-3-29 14:13:06

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索