jquery - 禁用 Draggable 时不更新 css

Question

在这个 fiddle 上，当我单击禁用“Li Point1”时，文本会变灰http://jsfiddle.net/adrianjsfiddlenetuser/Q9sHz/14/

能否保持元素原有的样式(不灰显)？

Answer 1

您有三个选择。您可以从 jquery-ui.css 中删除 .ui-state-disabled 的样式，可以覆盖您自己的自定义样式表中的样式，也可以将更改的属性标记为 !重要。

删除样式

要删除样式，您需要编辑 jquery-ui.css 并查找 .ui-state-disabled 规则(在 jQuery 1.7.2 中，它是第 262 行)。删除其中的所有样式(您将看到三个样式:opacity、filter 和 background-image。

这样做的缺点是，如果您更新 jQuery 并获取新的 CSS 文件，您将丢失所做的编辑。

添加自己的样式表

您可以为 .ui-state-disabled 添加自己的规则并更改禁用元素的样式。由于 ui-state-disabled 用于 jQuery 中禁用的所有内容，我建议将您的规则定义为 li 独有，或者在您的 上设置一个类>ul 并专门为其定义样式。

<ul class=".noStyleDisableDrag">
    ...
</ul>

.noStyleDisableDrag .ui-state-disabled {
    opacity: 1;
    filter: none;
    background-image: inherit;
}

标记为!重要

您还可以将不透明度、滤镜和背景图像样式添加到其他规则中，以定义特定项目的显示方式并使用 !important 标志。不过，这并不是最推荐的做法，因为如果您忘记标记它，它可能会对 CSS 样式调试造成严重破坏，但它是一种选择。为此，您只需将 li 设计为如下所示:

li {
    opacity: 1 !important;
    filter: none !important;
    background-image: (whatever you want, or none) !important;
}

请注意，在这种情况下，如果您没有在可拖动对象上设置背景图像，则不需要该行来设置背景图像；只需将 opacity 和 filter 设置为不被覆盖即可。另请注意，这些可以被 JavaScript 覆盖，因此它们并不是一成不变的。

<小时/>

在这三者中，您可能需要组合使用。我的建议是使用您自己的自定义样式表来覆盖 opacity 和 filter 属性。如果您使用背景图像，则可能需要使用 !important 来防止它被 ui-state-disabled 规则删除。但请尽可能少地使用 !important 标志。