解决二级菜单宽度不能自动按内容撑宽

4899 次阅读 by 九九 2013-09-21 | 标签:改善编程体验 java 工具使用 问题 Jquery Javascript

如题,这个问题已经遇到好几次了~之前都是偷懒,给二级菜单的部分加了一个定宽,如: HTML 代码

CSS代码:
ul.nav li { display: inline-block; position: relative; float: left; padding: 0px  10px; }
    ul.nav li a { display: block; width: 40px; }
    dl.sub-nav { position: absolute; top: 10px; left: 0px; border: 1px #ccc solid; overflow: hidden; display: none; /*width: 200px; */}
        dl.sub-nav dd { display: inline-block; float: left; padding: 0px 10px; }
有看到“/*width: 200px;*/”吗?这个是不行的,像导般这一块的链接也是可以后台的管理,如果这样写死,那就不做到自动,会有的长,有的短。 今天交流了一下,找到了问题点:是由于“dl.sub-nav”里有个“position: absolute”的属性定义,它让“dl.sub-nav”以下的元素“float”属性失效,所以它的子元素,就不会按“float”定义的来,排成一排。尽管此时的“dl.sub-nav”定义的是“display: block;”还是“display: inline-block;”,它都不会有一个宽度的增加。除非,你给它事先加上一个定宽,就像:
width: 200px;
这不是我想要的效果~于是乎,既然事先给它定一个宽就可以,那么在页面加载完我用JS代码去计算出它的真实宽,再去定义一下不就OK了?思路是这样~ 放上JS代码:
$(function(){
    $("ul.nav li dl.sub-nav").each(function(){
        var $this = $(this);
        var width = 0;
        $this.find("dd").each(function() {
            width += parseFloat($(this).css('width'))
            + parseFloat($(this).css('padding-left')) 
            + parseFloat($(this).css('padding-right')) 
            + parseFloat($(this).css('margin-left')) 
            + parseFloat($(this).css('margin-right'));
        });
        $this.css('width', width + "px");
    });
});
注意:这段计算代码对显示的元素才有效,如果你做了二级菜的效果,刚开始的时候隐藏了,那么计算出来的结果不是正确的,需要跟那个效果代码结合,鼠标放上链接再去之后再计算。 实现效果测试:http://jsfiddle.net/MyNK7/2/

评论(141)

暂无评论!


PS:多打字可以减肥哦~234字以内。支持表情:


Top