Question

所以我有一个内置的导航菜单，它调整每个li的大小以适应js菜单的整个宽度。

$(function() {

    changeWidth(500);

    function changeWidth(menuWidth){
        var menuItems = $('#menu li').size();
        var itemWidth = (menuWidth/menuItems)-2;

        $('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

这里设置得很好http://jsfiddle.net/MZ2wt/

我想知道是否有办法将宽度设置为100％，而不是必须声明绝对宽度（目前为500px）？

谢谢！

Answer 1

这是一个更好的小提琴：http://jsfiddle.net/MZ2wt/2/

实际上，它所做的只是取<body>宽度并对此进行判断。但请记住，如果您的元素不是body的直接子元素，您可能会得到一些非常奇怪的结果。因此，如果我是你，我会传递对您正在调整大小的元素的引用并致电$(this).parent().width()而不是$("body").width()

Answer 2

在CSS中将菜单设置为100％。然后更改您的函数以便它测量菜单的宽度，然后调整<li>元素的大小以适应测量的宽度。

您还可以更改设置宽度的位置以使用width()方法而不是css()方法，这样您就不必将宽度连接到{{1}的字符串中在最后

您还可以添加一个调整大小处理程序，在调整窗口大小时调用您的函数...

Answer 3

查看jsFiddle，您希望LI的宽度是UL的宽度等于LI的数量吗？

我已经更新了你的jsFiddle。基本上，我已将LI设置为向左浮动而不是显示内联。内联元素不能具有设置宽度。我已将LI设置为具有文本对齐中心，并从A中移除了浮动并将其放在LI上。

http://jsfiddle.net/MZ2wt/13/

$(function() {
    var lis = $('#menu ul li');
    lis.css('width', ($('#menu ul').outerWidth() / lis.length) + 'px');
});

Answer 4

你可以做那样的事情 Demo here

$（function（）{

changeWidth(100);// could be setted in CSS

function changeWidth(menuWidth){
    $('#menu').css({'width': menuWidth +'%'});
    var menuWidth =  $('#menu').width();
    var menuItems = $('#menu li').size();
    var itemWidth = (menuWidth/menuItems)-2;

   $('#menu a').css({'width': itemWidth +'px'});
} });

向窗口调整大小添加侦听器也很有趣。

Answer 5

.codropsmenu1{
    width:100%;
    padding:3px;
    height:30px;
    background-color:#282828;
}

在codropsmenu1类上添加宽度：100％，不设置菜单的宽度

$(function() {

    changeWidth();

    function changeWidth(){
        var menuItems = $('#menu li').size();
        var menuWidth = $('#menu').width();
        //alert(menuWidth);
        var itemWidth = (menuWidth/menuItems)-2;

        //$('#menu').css({'width': menuWidth +'px'});
        $('#menu a').css({'width': itemWidth +'px'});
    }
});

JQUERY - 自我调整大小的导航

5 个答案: