изменение значения CSS с JQuery

Question

Когда мое адаптированным-для-не-яваскрипта загрузки страницы, один из стилей, загруженных это:

//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'); 

Такой подход является гораздо более эффективным, чем запрашивая РОМ для всех аккордеонов, а затем изменить свойство стиля каждый элемент.

В дополнение к этому, это можно использовать повторно для других частей веб-сайта, где вам нужно иметь разные стили, если js недоступен.

Answer 2

Вы не можете изменить определение класса. Если вы хотите изменить свойство элемента:

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

Установите один или несколько свойств CSS для набора совпавших элементов.

Docs: 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.