Question

当我的自适应无javascript页面加载时，其中一个加载的样式是：

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

这样我的手风琴全部打开，没有javascript的用户可以看到内容。

但是当启用了javascript的用户访问该网站时，我希望自动更改该值：

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

如何使用jQuery做到最好？

这可能是相当基本的，但我是jquery / JS的新手，并且因为所有的搜索命中似乎都适用于更复杂的案例而有点迷失了解决方案。

Answer 1

我建议不要更改或注入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然后更改每个元素的样式属性更有效。

除此之外，这可以重复用于网站的其他部分，当js不可用时，您需要具有不同的样式。

Answer 2

您无法更改类定义。如果要更改元素的属性：

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

为匹配元素集设置一个或多个CSS属性。

文档：http://api.jquery.com/css/#css2

如果要覆盖所有元素的属性（不推荐）：

$('body').append('<style>.accordionItemCollapsed, .accordionItem.is-collapsed { max-height: 0; } </style>');

我建议你应该利用手风琴的open/close事件：

// accordion open event callback
$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', '100%');

// accordion close event callback
$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

Answer 3

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

Answer 4

你不需要jQuery来完成该任务，它会给你的应用程序增加不必要的开销。

只需使用以下代码，只有在访问者启用了javascript时才会执行。

document.getElementsByClassName("accordionItemCollapsed accordionItem.is-collapsed").style.maxWidth = "0px";

Answer 5

试试这个

$('.accordionItemCollapsed, .accordionItem.is-collapsed').css('max-height', 0);

css方法有两个参数，首先是案例max-height中的样式属性，然后是案例0中的值。

用jquery改变CSS值

5 个答案: