Heim  >  Artikel  >  Web-Frontend  >  默认隐藏左侧菜单的方法_html/css_WEB-ITnose

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

不言
不言Original
2018-05-28 15:06:092977Durchsuche

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

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn