Есть ли кроссбраузерный способ развернуть текст по клику с помощью css?
-
20-08-2019 - |
Вопрос
Во-первых, вот что я хотел бы сделать:
Row 1
Row 2
Row 3
У меня есть настройка кода, так что при наведении курсора мыши на строку 1, 2 или 3 строка подсвечивается.Это делается с помощью css.
Я хотел бы иметь возможность (например) щелкнуть строку 1, и тогда это выглядело бы следующим образом:
Row 1
Some text here
Row 2
Row 3
Этот текст будет оставаться там до тех пор, пока я не нажму на другую строку, после чего он исчезнет.Например, допустим, я нажал на следующую строку 2.
Row 1
Row 2
Even more text here
Row 3
Я нашел код, в котором говорится об использовании javascript для этого и настройке видимости текста, но я не уверен, как я могу это сделать, не имея тонны почти повторяющегося кода...
Решение
Если у вас больше javascript, чем необходимо для этой функции, jQuery оправдан, и он пригодится.С jQuery это было бы что-то вроде
$(".classOfYourRows").
click(function(){
$(".classOfChildren").hide();
$(".classOfChildren", this).show();
});
Другие советы
CSS - файл:
.outer {
display: block;
}
.outer .inner {
display: none;
margin-left: 10px;
}
.outer:hover {
background-color: #EEEEEE;
}
.outer:active .inner {
display: block;
}
HTML:
<div class="outer">
Row 1
<div class="inner">some text</div>
</div>
<div class="outer">
Row 2
<div class="inner">some text</div>
</div>
<div class="outer">
Row 3
<div class="inner">some text</div>
</div>
Я думаю, что это настолько близко, насколько вы можете приблизиться без использования Javascript.
Редактировать:Я думаю, что, возможно, я неправильно истолковал вопрос, я думал, что он не хотел использовать Javascript.Ну что ж, я все равно оставлю свой ответ при себе.
Единственный реальный кроссбраузерный способ справиться с этим - с помощью Javascript, поскольку, к сожалению, многие старые браузеры не поддерживали псевдоклассы :hover ни на чем, кроме привязочных элементов.
Возможно, вы захотите ознакомиться с MooTools на предмет их Fx.Слайд эффект, или, как неизменно упоминали все остальные, jQuery.
Я бы, вероятно, просто использовал jQuery и для этого, но поскольку в OP это вообще не упоминалось, вот простое старое решение JavaScript, протестированное только на FF3 / Mac, но достаточно уверенное, что оно кроссбраузерное (пожалуйста, поправьте меня, если я ошибаюсь):
<html>
<head>
<style type="text/css">
#data h2 {
/* colour should be same as BG colour, stops element expanding
on hover */
border: 1px solid #fff;
/* indicates to user that they can do something */
cursor: pointer;
}
#data h2:hover { /* Note this isn't supported in IE */
border: 1px solid #333;
}
.hidden p {
display:none;
}
</style>
<script type="text/javascript">
function init() {
var list = document.getElementById('data');
var rows = list.getElementsByTagName('li');
var active;
for(var i = 0; i < rows.length; i++) {
var row = rows[i];
// Hide if not the first, otherwise make active
if(i != 0) {
row.className = "hidden";
} else {
active = row;
}
row.getElementsByTagName('h2').item(0).onclick = function() {
active.className = "hidden";
this.parentNode.className = "";
active = this.parentNode;
}
}
}
</script>
</head>
<body onload="init()">
<!-- I'm using <ul> here since you didn't state the actual markup,
but you should be able to adapt it to anything -->
<ul id="data">
<li>
<h2>Row 1</h2>
<p>Some text here</p>
</li>
<li>
<h2>Row 2</h2>
<p>Some text here</p>
</li>
<li>
<h2>Row 3</h2>
<p>Some text here</p>
</li>
</ul>
</body>
</html>
Обратите внимание, что содержимое строки скрыто только при включенном JavaScript, что является важным (и часто упускаемым!) аспектом доступности.
Если вам нужен простой кроссбраузерный способ сделать это, я бы настоятельно посоветовал вам использовать jQuery - jQuery - запрос