使用jquery动态更改CSS显示属性并应用更改

我正在尝试构建一个类似jquery插件的任务栏。我正在尝试在一个div中添加按钮。当我有几个按钮可以放在父div中时，则可以将按钮大小设置为默认按钮大小。当添加新按钮时，父div start overflow，则应调整按钮大小以适合父按钮。当它们再次被移除时，按钮应该再次增加到默认大小。这是我的密码

    _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'});

        }
    },

\u resizeChildren:function（）{
var self=this；//这是保存任务栏的
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'））；
如果（toolbarWidth/（len+totalMargin）>=$（“#master”）.outerWidth（）/#master是保持默认大小的
{
css（{'display'：'block'}）；
css（{'tableLayout'：''}）；
css（{'display'：''}）；
children.outerWidth（parseInt（$（'#master'）.outerWidth（））；
}
否则{
css（{'display'：'table'}）；
css（{'tableLayout'：'fixed'}）；
css（{'display'：'table cell}）；
}
},

---

问题是，当我运行此代码时，当新按钮添加到父div的宽度时，它们的大小与默认大小相当。当它们开始溢出时，旧按钮不会调整大小，因此为新按钮留下的空间非常小，新按钮被压缩在右侧非常薄的空间中

所以我终于找到了解决办法。if/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', '');

        }
    },

\u resizeChildren:function（）{
var self=this；//这是保存任务栏的
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'））；
如果（toolbarWidth/（len+len*totalMargin）>=parseInt（$（“#master”）.outerWidth（））/#master是保持默认大小的
{
css（{'display'：'block'}）；
css（{'tableLayout'：''}）；
css（{'display'：''}）；
var maxWidth=$（“#master”）.outerWidth（）；
css（'maxWidth'，maxWidth）；
}
否则{
css（{'display'：'table'}）；
css（{'tableLayout'：'fixed'}）；
css（{'display'：'table cell}）；
css（'maxWidth'，''）；
}
},

---

现在，当我尝试一次只调用一个.css（）来应用所有这些属性时，它们开始发生各种有趣的事情，比如任务栏大小调整、按钮消失等等。我没有太多注意它。它是这样工作的，我觉得没问题

如果你不能复制，我们也不能。不幸的是，在这种情况下，我们无能为力