jquery - 使用 jquery 更改 CSS 值

Question

当我的 adapted-for-no-javascript 页面加载时，加载的样式之一是:

//accordion open
.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 100%;
}

这样我的 Accordion 就全部打开了，内容对没有 javascript 的用户可见。

但是当启用了 javascript 的用户访问该站点时，我希望该值像这样自动更改:

//accordion collapsed
.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 0;
}

我如何使用 jQuery 最好地做到这一点？

这可能是非常基础的，但我是 jquery/JS 的新手，在谷歌搜索解决方案时有点迷茫，因为所有搜索结果似乎都适用于更复杂的情况。

Answer 1

我建议不要更改或注入(inject) css，而是向 body/html/container 添加一个 no-js 类，然后使用 jquery 将其删除。

你的 CSS 看起来像这样

.accordionItemCollapsed, .accordionItem.is-collapsed {
    max-height: 0;
}

.no-js .accordionItemCollapsed, .no-js .accordionItem.is-collapsed {
    max-height: 100%;
}

jquery 非常简单

$('html').removeClass('no-js');

这种方法比在 dom 中查询所有 Accordion 然后更改每个元素的样式属性要高效得多。

除此之外，当 js 不可用时，您需要在网站的其他部分重用不同的样式。