Разворачивающийся блок по клику
Добрый день!
Помогите решить проблему, есть скрипт который открывает и закрывает блоки, но задача стоит в том чтобы закрывать предыдущий открытый блок при открытии нового:
<!DOCTYPE html>
<html>
<head>
<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>
<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(this);};
}
function show(elem){
var text = elem.getElementsByTagName('div')[0];
var clas = text.getAttribute('class');
if (clas == 'cont-hide') text.setAttribute('class', 'cont-show');
else if (clas == 'cont-show') text.setAttribute('class', 'cont-hide');
}
</script>
</html>
|
Vor_tex,
вот интересно как здесь https://learn.javascript.ru/event-delegation кликаешь и с предыдущей ячейки снимается выделение, может это вам подойдёт. P.S. то что вы ищите уже существует в 210 экзмплярах на форуме, кодовое слово "открывашка" :lol: |
Пролема в том что мне все это нужно прикрутить к mediawiki, другие подобные скрипты не могу запустить... они не могут подхватить getElementsById...
|
что можно сделать чтобы при открытии блока 2_2, закрывался блок 1_1 если он был открыт и наоборот???
|
Открывашка 211
:cray: :cray: :cray: :cray: :cray:
<!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(this);};
}
var selectedText;
function show(elem){
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>
|
вы мой спаситель, увы но мои знания мизерны в этом деле...
|
рони,
Давно ищу подобный скрипт, но есть проблема и в данном варианте: содержимое блоков, т.е TEXT 1, TEXT 2 - кликабельны! Как избавиться от этого? Нужно чтобы только открытие блоков(1_1, 2_2) было кликабельно, а содержимое - нет. ----------- Может можно как-то вот этот вариант модернизировать:
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
<a href="#" onclick="openbox('box'); return false"> Блок 1: Открыть/Закрыть </a>
<div id="box" style="display: none;"> Содержимое блока 1 </div>
<a href="#" onclick="openbox('box2'); return false"> Блок 2: Открыть/Закрыть </a>
<div id="box2" style="display: none;"> Содержимое блока 2 </div>
<a href="#" onclick="openbox('box3'); return false"> Блок 3: Открыть/Закрыть </a>
<div id="box3" style="display: none;"> Содержимое блока 3 </div>
задача таже: чтобы закрывался предыдущий открытый блок при открытии нового |
Окрывашка 242
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>
стилизованный блок не работает. в предыдущем Вашем варианте стилизация блока работала без проблем. единственное, что мешало, это кликабельность содержимого блока. А нельзя вообще уйти от модели блок в блоке? Тоже не очень хорошо. Может можно мой вариант как-то все-таки модернизировать? Буду благодарен. Ибо уже запарился искать нормальный вариант(ссылка-блок), что бы всё работало как надо. |
Feex,
то есть выбрать из 242 вариантов вам слабо, неужели вы думаите что среди них нет вашего? искать открывашка |
открывашка 243 ссылка + блок на js
Feex,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.open + .box{
display: none;
}
.open.show + .box{
display: block;
}
</style>
</head>
<body>
<a href="#" class="open"> Блок 1: Открыть/Закрыть </a>
<div class="box"> Содержимое блока 1 </div>
<br>
<a href="#" class="open"> Блок 2: Открыть/Закрыть </a>
<div class="box"> Содержимое блока 2 </div>
<br>
<a href="#" class="open"> Блок 3: Открыть/Закрыть </a>
<div class="box" > Содержимое блока 3 </div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelector("body"),
e = document.querySelectorAll(".open");
d.addEventListener("click", function(a) {
var b = a.target,
c = b.classList;
c && c.contains("open") && ([].forEach.call(e, function(a) {
a.classList[a == b ? "toggle" : "remove"]("show")
}), a.preventDefault())
})
});
</script>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
</head>
<body>
<a onclick="_click(1); return false;" href="#">1</a>
<a onclick="_click(2); return false;" href="#">2</a>
<a onclick="_click(3); return false;" href="#">3</a>
<div style=" display:none" id="item1">div1</div>
<div style=" display:none" id="item2">div2</div>
<div style=" display:none" id="item3">div3</div>
</body>
</html>
Кстати, Ваш вариант) |
Цитата:
дочитайте тему где нашли скрипт до конца http://javascript.ru/forum/misc/2599...tml#post389023 |
Цитата:
|
Feex,
берите вариант 243 из 11 сообщения здесь. |
Цитата:
я в шоке откуда такие люди берутся... то ли это специфика всех "программеров", то ли просто люди сами по себе такие... Спасибо, что хоть на х..й не послали... |
Feex, вы просто редкостная душка :cray:
|
| Часовой пояс GMT +3, время: 12:39. |