默认隐藏左侧菜单的方法

darkerXi 发布于2019-08-19 18:24 / 502人阅读

摘要：公司一项目需要默认隐藏框架的左侧菜单，遇到了一些问题，下面简要记录问题的解决过程，以备后续查看参考。这种情况应该是获取默认菜单的时机不对，应该在左侧菜单切换完成后获取。在菜单绑定的单击方法中，左侧菜单的内容并没有完成刷新。

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

初

这个问题看似很简单，只需要找到对应的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了。

设置菜单默认隐藏

改变控制元素的状态:"close" to "open"

改变右侧内容内容页的默认宽度（原宽度=总宽度-左侧-控制元素） $("#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，这个问题也就解决了。

云服务器 GPU云服务器左侧菜单 asp左侧菜单 asp 左侧菜单 dede后台左侧菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79547.html

CSS学习笔记(九) 界面组件之导航菜单

摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

pingink 2019-08-28 18:03 评论0 收藏0
zTree v3.5 Demo 演示 OutLook 样式的左侧菜单

摘要：由于工作需要，这里只是把组合功能中样式的左侧菜单参考源码实现了，分享给大家我的学习所得。代码的配置注意在的配置利用回调将展开按钮转移到标签内，否则展开按钮即小箭头图片无法显示。简介为了让朋友们更容易的学习 zTree，官网给出了大量的 Demo，不同的图标，不同的风格，好学易懂，这是官网链接：zTree v3.5 Demo 演示。由于工作需要，这里只是把组合功能中OutLook ...

siberiawolf 2019-08-19 18:44 评论0 收藏0