Question

我的代码非常简单：

var html = "";

 html += "<div><button class='mybutton'>shortbutton</button></div>";
 html += "<div><button class='mybutton'>short</button></div>";
 html += "<div><button class='mybutton'>loooooooooooooooooooooooooong</button></div>";

 $("#mymenu").html(html);
 $("#myaccordion").accordion({
             heightStyle: "content",
             collapsible: true,
             active: false 
         });


   $( ".mybutton" ).button().click(function( event ) {
                event.preventDefault();
 });

var greatestWidth = 0;   // Stores the greatest width
$(".mybutton").each(function() {   
var theWidth = $(this).width();   // Grab the current width
console.log(" widht: "+theWidth);
if( theWidth > greatestWidth) {   
   greatestWidth = theWidth;     //    set greatestWidth to theWidth
 }
});

$(".mybutton").width(greatestWidth);

我有一个手风琴里面的按钮列表，我想设置相同尺寸的每个按钮，无论如何，如果手风琴打开并且元素可见，一切都很好。如果，就像在这个例子中，手风琴被关闭，这个函数返回一个负数或零thush失败。

Answer 1

尝试使用outerWidth而不是width，它会考虑填充和边框。

var theWidth = $(this).outerWidth();

在所有其他方面，您的代码应该没问题。

请参阅example

更新

当元素不可见时，jquery的.width()将始终为零。

要解决此问题，您可以例如克隆元素，暂时将其设置为display:block和visibility:hidden（或零不透明度），测量其宽度然后删除。像这样：

$(".mybutton").each(function() {

         // create temp element to grab width of an invisible element
         var tmpbtn = $(this).clone().appendTo( "body" ).css({'display':'block', 'visibility': 'hidden'});
         var theWidth = tmpbtn.width();
         tmpbtn.remove();

         console.log(theWidth); //this is for checking
         if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
             greatestWidth = theWidth;     //    set greatestWidth to theWidth
         }
     });

请参阅更新的fiddle

jquery .width（）在手风琴内的元素上返回负值

1 个答案: