用jQuery随时更改CSS显示属性并应用更改

Question

我正在尝试构建一个像jquery插件的任务栏。我正试图在div中添加按钮。当我有几个可以放入父div的按钮时，可以将按钮大小设置为默认按钮大小。当新的按钮要添加父div开始溢出，然后按钮大小应调整大小，以适应父母。当它们再次被移除时，按钮应该再次增加到它们的默认大小。这里是我的代码

_resizeChildren: function() { 

     var self = this; // this is the <div> holding the taskbar 
     var children = self.element.children(); 
     var len = children.length; 
     var toolbarWidth = parseInt(self.element.width()); 
     var totalMargin = parseInt(children.css('marginLeft')) + parseInt(children.css('marginRight')); 


     if (toolbarWidth/(len + totalMargin) >= $('#master').outerWidth()) //#master is a <div> holding the default size 
     { 
      self.element.css({'display': 'block'}); 
      self.element.css({'tableLayout': ''}); 
      children.css({'display': ''}); 
      children.outerWidth(parseInt($('#master').outerWidth())); 
     } 
     else { 
      self.element.css({'display': 'table'}); 
      self.element.css({'tableLayout': 'fixed'}); 
      children.css({'display': 'table-cell'}); 

     } 
    }, 

的问题是，当我运行这段代码，当新的按钮添加多达父div的宽度他们是单位的微细使用默认大小。当它们开始溢出时，旧的按钮不会调整大小，因此留下很小的空间用于在非常薄的空间中向右挤压的新按钮。

Answer 1

所以我终于找到了一个解决方案。如果/ else块应该是

_resizeChildren: function() { 

     var self = this; // this is the <div> holding the taskbar 
     var children = self.element.children(); 
     var len = children.length; 
     var toolbarWidth = parseInt(self.element.width()); 
     var totalMargin = parseInt(children.css('marginLeft')) + parseInt(children.css('marginRight')); 


     if (toolbarWidth/(len + len * totalMargin) >= parseInt($('#master').outerWidth())) //#master is a <div> holding the default size 
     { 
      self.element.css({'display': 'block'}); 
      self.element.css({'tableLayout': ''}); 
      children.css({'display': ''}); 
      var maxWidth =$('#master').outerWidth(); 
      children.css('maxWidth', maxWidth); 
     } 
     else { 
      self.element.css({'display': 'table'}); 
      self.element.css({'tableLayout': 'fixed'}); 
      children.css({'display': 'table-cell'}); 
      children.css('maxWidth', ''); 

     } 
    }, 

现在，当我尝试应用这些性质的一次只使用一个调用的.css（），他们开始发生各种讨人喜欢的东西，如任务栏调整大小，按钮消失等我没有太注意它。它的工作原理是这样的，我认为它没问题。