Сообщение от рони
|
Feex,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">1_1
<div class='cont-hide'>text1
</div>
</div>
<div class="cont">2_2
<div class='cont-hide'>text2
</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(event,this);};
}
var selectedText;
function show(event,elem){
if(event.target != elem) return;
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>
|
Появился другой косяк: невозможна стилизация блока на месте:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.cont {
cursor:pointer;
}
.cont-hide {
display:none;
}
.cont-show {
text-align:left;
display:block;
width:215px;
}
.cont-show a {
text-decoration:none;
color:#BAB7B8;
}
.cont-show a:hover {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<div class="cont">Блок 1
<div class='cont-hide'>text1</div>
</div>
<div class="cont"><h4><font color="#5FAD00">Блок 2:</font> Открыть/Закрыть</h4>
<div class='cont-hide' style="background:#d3ebf6; border: 1px solid #AAA; padding:14px 14px 14px 14px; border-radius:12px;">text2</div>
</div>
<script>
var contents = document.getElementsByClassName('cont');
for ( i = 0; i < contents.length; i++){
contents[i].onclick = function() {show(event,this);};
}
var selectedText;
function show(event,elem){
if(event.target != elem) return;
var text = elem.getElementsByTagName('div')[0];
var clas = text.className;
selectedText && text != selectedText && (selectedText.className = 'cont-hide')
text.className = clas == 'cont-hide' ? 'cont-show' : 'cont-hide';
selectedText = text
}
</script>
</body>
</html>
стилизованный блок не работает.
в предыдущем Вашем варианте стилизация блока работала без проблем. единственное, что мешало, это кликабельность содержимого блока.
А нельзя вообще уйти от модели блок в блоке? Тоже не очень хорошо.
Может можно мой вариант как-то все-таки модернизировать? Буду благодарен. Ибо уже запарился искать нормальный вариант(ссылка-блок), что бы всё работало как надо.