Question

我不确定是否有快速解释我正在做的事情，所以请耐心等待......

我正在设置一系列列元素（li.element），并且在点击任何一个li.element时，我希望它扩展到给定的百分比宽度并让所有其他列元素还原标准尺寸（基本上是手风琴）。

棘手的部分是，我需要可变数量的列，并且要填充的父元素的可变宽度（基于视口宽度）

我已经计算出数学用jQuery动态设置“折叠”和“扩展”列宽：

var TotalWidthInPixels = $("ul.parent").width();
var PercentageWidthOfExpandedColumn = .50
var TotalColumnCount = $("li.element").length;
var ExpandedColumnWidthInPixels = TotalWidthInPixels * PercentageWidthOfExpandedColumn
var CollapsedColumnWidthInPixels = (TotalWidthInPixels * (1.0 - PercentageWidthOfExpandedColumn)) / (TotalColumnCount - 1);

我已使用结果设置标准（未展开）和折叠（.collapsed）列（li.element）的宽度。

$("li.element").css("width", ExpandedColumnWidthInPixels);
$(".collapsed").css("width", CollapsedColumnWidthInPixels);

默认情况下，我还有一些jQuery可以向.collapsed添加li.element，并且在点击任意列时从.collapsed中删除.collapsed（同时还添加li.element每隔一个.collapsed;但即使我不重新添加//// WHEN A COLLAPSED COLUMN IS CLICKED, COLLAPSE ALL OTHERS, THEN EXPAND IT $(".collapsed").click(function(){ $("li.element").addClass("collapsed"); $(this).removeClass("collapsed"); });），我也会遇到此错误。

.collapsed

我的样式表集CSS（背景颜色等）的其余部分与类开关一样正常工作，因此我可以确定click()类实际上是通过{添加和删除的{1}} ...但是jQuery设置的CSS宽度没有更新。列保留在jQuery最初在文档准备好时建立的值。

我已从相关元素的样式表集CSS中删除了所有宽度提及，因此我可以肯定jQuery是推动这些样式宽度的唯一方法。

注意：当通过样式表显式地和静态地设置展开和折叠的列宽时，我按预期启动并运行此交互 - 即使在点击时通过jQuery更新了类。唯一改变的是我现在通过jQuery动态设置我的类的宽度。

当jQuery更新相应的CSS类时，为什么我的jQuery-set CSS宽度没有更新？

Answer 1

经过几次阅读之后，看起来好像你期望$(".collapsed").css("width", CollapsedColumnWidthInPixels);实际改变collapsed类的定义。是这样吗？如果是，它不会那样工作。该行设置所选元素的宽度，不会更改类定义。

我想也许您需要将ExpandedColumnWidthInPixels和CollapsedColumnWidthInPixels保存到窗口范围内并执行此操作：

$(".collapsed").click(function(){
    $(this).css("width", ExpandedColumnWidthInPixels);
    $("li.element").css("width", CollapsedColumnWidthInPixels);
});

jQuery为类设置css宽度，但是在jQuery启动的类更改时不更新宽度

1 个答案: