Question

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

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

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

即表示如果父级有.category.all

，则应隐藏具有类.isCategorizing的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不起作用 - 切换“all”会导致按钮可见，即使它不应该也是如此。其次，我继承了.category类的一些道具，因为这个按钮显示在“类别列表”的末尾，可以说是想避免重复。

如果我使用toggleClass并且只是复制它可能有效的道具，那么第二个想法... lemme试试这个并发布更新

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这样关系对维护者来说就更明显了）。您可以通过以下方式执行此操作：

将toggleClass('.not-all')添加到您已经拥有toggleClass('.all')的一两个地方，
将display CSS样式设置器移到新选择器中，这些设置器将由新not-all类

防止jquery的show / hide添加内联样式？

1 个答案: