Javascript jQuery未根据总li宽度重置导航元素宽度

Javascript jQuery未根据总li宽度重置导航元素宽度,javascript,jquery,css,drop-down-menu,html-lists,Javascript,Jquery,Css,Drop Down Menu,Html Lists,我需要动态调整下拉菜单主导航栏的大小,以便调整其大小以适应导航菜单项名称中不同长度的字符。以下是我目前的代码: $(document).ready(function(){ var wNav = $("#navigation").outerWidth(); var wLiTotal = 0; $("#navigation>ul>li").each(function(){ wLiT

我需要动态调整下拉菜单主导航栏的大小,以便调整其大小以适应导航菜单项名称中不同长度的字符。以下是我目前的代码:

 $(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;

            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };
          });    
       });
$(文档).ready(函数(){
var wNav=$(“#导航”).outerWidth();
var wLiTotal=0;
$(“#导航>ul>li”)。每个(函数(){
wLiTotal+=$(this).outerWidth();
如果((wLiTotal>wNav)| |(wLiTotal

问题是,即使我得到了所有li的总宽度,出于某种原因,它不会将wNav重置为该宽度,我不知道为什么。提前感谢您的帮助。

这是因为您只计算了外径,而没有设置它

$(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;

            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };

            //setting outer width
            $("#navigation").outerWidth(wNav);
          });    
       });
$(文档).ready(函数(){
var wNav=$(“#导航”).outerWidth();
var wLiTotal=0;
$(“#导航>ul>li”)。每个(函数(){
wLiTotal+=$(this).outerWidth();
如果((wLiTotal>wNav)| |(wLiTotal
使用这个插件jquery.dimensions.etc.js

$(文档).ready(函数(){
var wNav=$(“#导航”).outerWidth();
var wLiTotal=0;
$(“#导航>ul>li”)。每个(函数(){
wLiTotal+=$(this).outerWidth();
如果((wLiTotal>wNav)| |(wLiTotal
是否应该有
$(“#导航”).width(wNav)每一个之后?我认为outerWidth()只是一个“getter”函数。有趣的是,尽管文档声称
.outerWidth()
.outerWidth()
只是getter,但实际上可以通过指定一个数字而不是布尔值来设置它们。我没有在这方面做过太多的实验,但是
outerHeight
当然可以在一个包含大量元素的大型页面容器上工作。我的错误是,它的jqueryui允许您将它们用作setter。JS提琴:。试试
$(“#导航”)。宽度(wNav)我也不明白为什么你要调整宽度而不是下拉菜单的高度:我需要调整宽度以适应不同语言的导航项目名称,即增加字符数。你能发布一个演示吗?我编辑了你的小提琴,这是你想要达到的吗?是的!我想这一切都会发生在最后一行的位置上。
$(document).ready(function() {
    var wNav = $("#navigation").outerWidth();
    var wLiTotal = 0;

    $("#navigation>ul>li").each(function() {
        wLiTotal += $(this).outerWidth();
        if ((wLiTotal > wNav) || (wLiTotal < wNav)) {
            wNav += wLiTotal + 3;  // you've increase wNav with its previous value
        };
    });
    $("#navigation").width(wNav); // set new wNav as new width
});