二级菜单宽度不能自动适应宽度解决方法

时间：2014-01-07 编辑：简简单单来源：一聚教程网

如题，这个问题已经遇到好几次了～之前都是偷懒，给二级菜单的部分加了一个定宽，如：

HTML 代码

代码如下

复制代码

    ###1



####-1


####-2

###2

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; }

有看到“/**/”吗？这个是不行的，像导般这一块的链接也是可以后台的管理，如果这样写死，那就不做到自动，会有的长，有的短。
今天交流了一下，找到了问题点：是由于“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");
    });
    });

注意：这段计算代码对显示的元素才有效，如果你做了二级菜的效果，刚开始的时候隐藏了，那么计算出来的结果不是正确的，需要跟那个效果代码结合，鼠标放上链接再去之后再计算。

上一个： jquery设置div,文本框表单的值示例
下一个： EditPlus中利用自用正则替换字符串

推荐专题

最新下载

热门教程

二级菜单宽度不能自动适应宽度解决方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程