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

Question

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

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

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

也就是说，如果它的父级具有 .isCategorizing 类，则应隐藏具有类 .category.all 的 div

现在在 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 时才希望隐藏它

如果是这种情况，最简单的方法是将all 类的含义颠倒过来，使用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 类触发