Мне нужно что-то очень похожее на складные заголовки Theming, расположенные здесь:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html
Без использования JQuery это возможно?
Это для мобильного сайта, но страница всегда будет отключена, поэтому я действительно не хочу использовать jquery. Также предоставление пользовательского стиля jQuery mobile намного сложнее, чем использование чистого CSS и его стиль.
label и checkboxСохраняет выбранный элемент открытым и переключаемым.
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>Вы можете использовать checkbox для симуляции onClick с помощью CSS:
input[type=checkbox]:checked + p {
display: none;
}
Мне нравится ответ Roko и добавлен несколько строк, чтобы вы получили треугольник, который указывает, когда элемент скрыт, и вниз, когда он отображается:
.collapse { font-weight: bold; display: inline-block; }
.collapse + input:after { content: " \25b6"; display: inline-block; }
.collapse + input:checked:after { content: " \25bc"; display: inline-block; }
.collapse + input { display: inline-block; -webkit-appearance: none; -o-appearance:none; -moz-appearance:none; }
.collapse + input + * { display: none; }
.collapse + input:checked + * { display: block; }
Конечно! jQuery - это просто библиотека, которая в любом случае использует javascript.
Вы можете использовать document.getElementById для получения соответствующего элемента, а затем соответствующим образом изменить его высоту через element.style.height.
elementToChange = document.getElementById('collapseableEl');
elementToChange.style.height = '100%';
Оберните это аккуратной маленькой функцией, которая предназначена для переключения вперед и назад, и у вас есть решение.