0

我不确定有没有一种快速的方法来解释我在做什么，所以请耐心等待...

我正在设置一系列列元素 ( 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");
});

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

我已经从相关元素的样式表集 CSS 中删除了所有对宽度的提及，所以我可以确定 jQuery 是唯一驱动这些样式宽度的东西。

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

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

4

1 回答 1

1

读了几次之后，看起来你可能希望$(".collapsed").css("width", CollapsedColumnWidthInPixels);真正改变collapsed类的定义。是这样吗？如果是，那么它不会那样工作。该行设置所选元素的宽度，它不会更改类定义。

我认为也许您需要ExpandedColumnWidthInPixels并将CollapsedColumnWidthInPixels其保存到窗口范围并改为执行此操作：

$(".collapsed").click(function(){
    $(this).css("width", ExpandedColumnWidthInPixels);
    $("li.element").css("width", CollapsedColumnWidthInPixels);
});
于 2013-07-27T00:18:19.637 回答