阻止jquery的显示/隐藏添加内联样式？

Question

我有一个情况，我需要根据特定操作（分类）是否正在进行来切换元素的可见性，如果是的话，它是隐藏的，否则它是可见的。

现在我的CSS看起来像这样：

.isCategorizing .category.all {
   display:none;
}

即，这意味着如果它的父级具有类.isCategorizing<，则应该隐藏带有类.category.all的div /code>

现在，在 jquery 中，如果我切换 .category.all 元素的可见性，则会将内联样式添加到 HTML，优先于 .css 文件中的 CSS！因此，即使上述情况成立，内联样式的可见性值似乎优先，并且元素不会隐藏。在可见 jquery 中添加 style=display:list-item; 到 div 而我的 CSS 应该将其隐藏...

我可以在纯 jQuery 中处理这个问题，但是有太多的状态和检查需要进行确保它应该以这种特定方式工作，并维护一个布尔标志来“记住”该状态是否存在以及是否恢复到该状态。 CSS 方法更简单、更干净，但内联样式令人恼火......

如何最好地处理这个问题？我尝试创建另一个类 .hide 并使用 jquery 切换它。似乎有效，但由于某种原因搞砸了我的元素的定位。我正在玩它，但似乎找不到解决这个问题的干净方法。有什么建议吗？

更新：

这是相应的CSS：

.category{
        position:relative;
        padding:1px;
        margin:2px 0 5px 0;
        clear:both;
        font-family:arial, sans-serif;
        font-size: 14px;
        display:inline-block;
        width:inherit;
    }   


.category.all {
        display:none;
        width:200px;
        text-align: center;
        padding:3px;
        border:2px solid transparent;
        border-radius: 4px;
        background-color: #DDDFE3;
    }

注意：简单的toggleClass在这种情况下不起作用 - 切换“全部”会导致按钮可见，即使它应该可见不会的。其次，我从 .category 类继承了一些属性，因为这个按钮显示在“类别列表”的末尾，可以这么说，并且希望防止重复。

如果我使用toggleClass并复制它可能会起作用的道具，再想一想...让我尝试一下并发布更新

Answer 1

经过所有澄清后，似乎：

• 如果按钮具有 .all，您希望将其隐藏（无论父级是否具有 .isCategorizing）
• 如果按钮没有有 .all，你希望它被隐藏当且仅当父级有 isCategorizing

如果是这种情况，最简单的就是反转 的含义所有类和使用类 partial 代替它。然后您可以这样做：

.category {
    display: none;
}

.category.partial {
    display: inline-block;
}

.isCategorizing .category.partial {
    display: none;
}

如果废弃 .all 会在您未在此处显示的其他代码中引入问题，您可以继续使用它并引入 .partial （在这种情况下，我我希望将其命名为 .not-all，以便维护者更清楚地了解这种关系）。您可以通过以下方式执行此操作：

1. 将 toggleClass('.not-all') 添加到已有 toggleClass('.all') 的一两个位置，然后
2. 移动新选择器内的 display CSS 样式设置器将由新的 not-all 类触发