Форум

Vor_tex · #1 (**permalink**) 08.04.2015, 13:50

Добрый день!
Помогите решить проблему, есть скрипт который открывает и закрывает блоки, но задача стоит в том чтобы закрывать предыдущий открытый блок при открытии нового:

<!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>

рони · #2 (**permalink**) 08.04.2015, 14:04

Vor_tex,
вот интересно как здесь https://learn.javascript.ru/event-delegation
кликаешь и с предыдущей ячейки снимается выделение, может это вам подойдёт.
P.S. то что вы ищите уже существует в 210 экзмплярах на форуме, кодовое слово "открывашка"

Vor_tex · #3 (**permalink**) 08.04.2015, 15:01

Пролема в том что мне все это нужно прикрутить к mediawiki, другие подобные скрипты не могу запустить... они не могут подхватить getElementsById...

Vor_tex · #4 (**permalink**) 08.04.2015, 15:43

что можно сделать чтобы при открытии блока 2_2, закрывался блок 1_1 если он был открыт и наоборот???

рони · #5 (**permalink**) 08.04.2015, 17:23

<!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>

Vor_tex · #6 (**permalink**) 08.04.2015, 17:27

вы мой спаситель, увы но мои знания мизерны в этом деле...

Feex · #7 (**permalink**) 30.12.2015, 20:50

рони,
Давно ищу подобный скрипт, но есть проблема и в данном варианте: содержимое блоков, т.е 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>

задача таже: чтобы закрывался предыдущий открытый блок при открытии нового

рони · #8 (**permalink**) 30.12.2015, 21:02

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>

Feex · #9 (**permalink**) 30.12.2015, 21:47

Сообщение от рони

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>

стилизованный блок не работает.
в предыдущем Вашем варианте стилизация блока работала без проблем. единственное, что мешало, это кликабельность содержимого блока.
А нельзя вообще уйти от модели блок в блоке? Тоже не очень хорошо.
Может можно мой вариант как-то все-таки модернизировать? Буду благодарен. Ибо уже запарился искать нормальный вариант(ссылка-блок), что бы всё работало как надо.

рони · #10 (**permalink**) 30.12.2015, 22:05

Feex,
то есть выбрать из 242 вариантов вам слабо, неужели вы думаите что среди них нет вашего?
искать открывашка

Форум

Справочник

Discord чат

Курсы javascript