Каскадный режим | Линейный режим

***Admin*** · 11.10.2015 01:12:34

Вроде сделал... Проверяйте:

Код:

<HTML>

 <HEAD><meta charset="utf-8">

 <TITLE>Скрипт</TITLE>

 <style type="text/css">

 .spoiler {border-radius:7px; border:1px solid blue; background:lavender;}

 .spoiler {cursor:pointer; margin:5px 0;}

 /*.spoiler:hover {background:lavenderblush;}*/

 .spoiler dt:hover {background:lavenderblush; border-radius:12px;}

 .spoiler dt {margin:3px; padding:2px 0 5px 9px;}

 .spoiler dd {display:none; border-radius:7px; border:1px solid blue;}

 .spoiler dd {margin:0 9px 7px 33px; padding:7px; text-align:justify;}

 .spoiler dd {background:lavender;}

 .spoiler dt>span:nth-child(2){display:none;}

 </style>

 <script>

 document.onclick=function(ev){//клик где то по документу

 var obj=ev?ev.target:event.srcElement;//остальные или ИЕ

 //в цикле просматриваем все теги, от тега по которому щёлкнули до тега HTML.

 while(obj.parentNode){//если нет, то вышли за пределы HTML

 if(obj.className=="spoiler"){break;}//если попался нужный элемент

 else{obj=obj.parentNode;}};//иначе ищем дальше

 //на выходе из цикла проверяем где вышли

 if(obj.className=="spoiler"){

 clickSpoiler(obj);

 return false;};

 //если не спойлер, значит кликнули мимо

 closet();

 };

 function clickSpoiler(el){//клик по dl, dt, dd

 var s=el.getElementsByTagName("dd")[0].style.display;

 closet();

 if(s=="none"||s==""){//открыть по которому кликнули

 el.getElementsByTagName("dt")[0].getElementsByTagName("span")[1].style.display="inline";

 el.getElementsByTagName("dt")[0].getElementsByTagName("span")[0].style.display="none";

 el.getElementsByTagName("dd")[0].style.display="block";};

 };

 function closet(){//закрываем все не глядя

 var m, k;

 m=document.getElementsByTagName("dl");

 k=m.length;

 while(k--){

 if(m[k].className=="spoiler"){

 m[k].getElementsByTagName("dt")[0].getElementsByTagName("span")[0].style.display="inline";

 m[k].getElementsByTagName("dt")[0].getElementsByTagName("span")[1].style.display="none";

 m[k].getElementsByTagName("dd")[0].style.display="none";}};

 };

 </script>

 </HEAD>

 <body>

 <dl class="spoiler">

 <dt><span>Заголовок</span><span>Другой Заголовок</span> <input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>

 <dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное вЂ” придумать все эти назначения»</dd>

 </dl>

 <dl class="spoiler">

 <dt><span>Еще Заголовок</span><span>Еще Другой Заголовок</span> <input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>

 <dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное вЂ” придумать все эти назначения»</dd>

 </dl>

 <dl class="spoiler">

 <dt><span>Заголовок 3</span><span>Опять новый</span> <input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>

 <dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное вЂ” придумать все эти назначения»</dd>

 </dl>

 </body>

</HTML>

P.S. Сделал специально так, чтобы у каждого спойлера могли быть свои два заголовка: при окрытом спойлере и при закрытом.
Если делать у всех спойлеров одинаковые заголовки, то код был бы чуть проще и меньше.

goldfish · 11.10.2015 13:48:34

А Д М И Н !!!
С П А С И Б О !!!
Drink

Если мой сайт будет иметь хоть какую популярность, я обязательно сделаю ссылку на твой сайт! Еще раз спасибо, мб если могу чем-нибудь помочь, я был бы тоже рад.

Еще вопрос, у вас есть акк в ВК? Blush

А и еще вопрос, какой редактор html и прочих web языков лучше? У меня сейчас webbuilder стоит, но есть еще установочник visual studio, там тоже есть какой-то редактор, ну вообще прост думаю, есть ли лучше программы?

Ой, сори за столько вопросов =/
Спойлер то что надо, при клике на поле ввода или содержимое спойлера, он не закрывается, а вот когда нажмешь правую, то сворачивается, и выходит не получится толком скопировать текст.
Можно пофиксить эту проблему? Unknown

***Admin*** · 11.10.2015 18:05:45

Аккаунта в vk нет (раньше был, но надобность в нем отпала).

Какой редактор лучше не могу сказать, т.к. привык писать все сам и пользуюсь стареньким PHP Expert Editor. Так что используйте тот, который Вам больше нравится и удобнее в использовании.

Проблема с закрытием по клику правой кнопкой мыши я так думаю только в Firefox. Попробуйте заменить функцию document.onclick=function(ev){ . . . }; на такую:

Код:

document.onclick=function(ev){//клик где то по документу

 but=ev?ev:event;

 if (but.button == 0) {

 var obj=ev?ev.target:event.srcElement;//остальные или ИЕ

 //в цикле просматриваем все теги, от тега по которому щёлкнули до тега HTML.

 while(obj.parentNode){//если нет, то вышли за пределы HTML

 if(obj.className=="spoiler"){break;}//если попался нужный элемент

 else{obj=obj.parentNode;}};//иначе ищем дальше

 //на выходе из цикла проверяем где вышли

 if(obj.className=="spoiler"){

 clickSpoiler(obj);

 return false;};

 //если не спойлер, значит кликнули мимо

 closet();

 }

 };

goldfish · 11.10.2015 21:52:26

АГА! СПАСИБО, все работает ! ))

goldfish · 12.10.2015 00:35:44

В общем, получилось то, что надо =)
Сделал код по всем необходимым требованиям.
Что получилось:

Код:

<HTML>

<HEAD><meta charset="utf-8">

<TITLE>Скрипт</TITLE>

<script>

document.onclick=function(ev){ //клик где то по документу

but=ev?ev:event;

if (but.button == 0) {

var obj=ev?ev.target:event.srcElement;//остальные или ИЕ

//в цикле просматриваем все теги, от тега по которому щёлкнули до тега HTML.

while(obj.parentNode){//если нет, то вышли за пределы HTML

if(obj.className=="spoiler"){break;}//если попался нужный элемент

else{obj=obj.parentNode;}};//иначе ищем дальше

//на выходе из цикла проверяем где вышли

if(obj.className=="spoiler"){

clickSpoiler(obj);

}}};

function clickSpoiler(el){//клик по dl, dt, dd

var s=el.getElementsByTagName("dd")[0].style.display;

closet();

if(s=="none"||s==""){//открыть по которому кликнули

el.getElementsByTagName("dt")[0].getElementsByTagName("span")[1].style.display="inline";

el.getElementsByTagName("dt")[0].getElementsByTagName("span")[0].style.display="none";

el.getElementsByTagName("dd")[0].style.display="block";}};

function closet(){//закрываем все не глядя

var m, k;

m=document.getElementsByTagName("dl");

k=m.length;

while(k--){

if(m[k].className=="spoiler"){

m[k].getElementsByTagName("dt")[0].getElementsByTagName("span")[0].style.display="inline";

m[k].getElementsByTagName("dt")[0].getElementsByTagName("span")[1].style.display="none";

m[k].getElementsByTagName("dd")[0].style.display="none";}}};

</script>

<style type="text/css">

.spoiler {border-radius:7px; border:1px solid blue; background:lavender;}

.spoiler {cursor:pointer; margin:5px 0;}

/*.spoiler:hover {background:lavenderblush;}*/

.spoiler dt:hover {}

.spoiler dt { /* заголовок спойлера*/

  margin:0px;

  padding:5px 0px 2px 10px;

  background: #2B2B2B;

  border-radius:3px 3px 0px 0px;

  color: #FFFFFF

    }

.spoiler dd { /*тело спойлера*/

  display:none;

  border-radius:7px;

  margin: 1px;

  padding:7px;

  text-align:justify;

  background:#E0E0D1;

  cursor:default;

    }

input {

  height: 25px;

  padding-left: 5px;

  cursor: text;

  background-color: #FFF5F5

    }

.spoiler dt>span:nth-child(2){display:none;}

</style>

</HEAD>

<body>

<dl class="spoiler"><dt><span>

0317: увеличить пройденные миссии на 1</span><span><input readonly="readonly" onclick="event.stopPropagation()" size="60px" value=

"0317: increment_mission_attempts"  ></span></dt><dd onclick="event.stopPropagation()" onkeyup="checkCurr(this)">

Увеличить число попыток прохождения миссий в статистике на 1</dd></dl>

<dl class="spoiler"><dt><span>

0317: увеличить пройденные миссии на 1</span><span><input readonly="readonly" onclick="event.stopPropagation()" size="60px" value=

"0317: increment_mission_attempts"  ></span></dt><dd onclick="event.stopPropagation()" onkeyup="checkCurr(this)">

Увеличить число попыток прохождения миссий в статистике на 1</dd></dl>

<dl class="spoiler"><dt><span>

0317: увеличить пройденные миссии на 1</span><span><input readonly="readonly" onclick="event.stopPropagation()" size="60px" value=

"0317: increment_mission_attempts"  ></span></dt><dd onclick="event.stopPropagation()" onkeyup="checkCurr(this)">

Увеличить число попыток прохождения миссий в статистике на 1</dd></dl>

</body>

</HTML>

Этот код спойлера будет использоваться несколько десятков раз на странице сайта, вроде бы он и не такой "громоздкий".

Было б конечно еще лучше, если есть возможность сделать код спойлера еще компактнее, хоть это мб не так важно Jokingly

Ну как-то так Smile

***Admin*** · 12.10.2015 13:47:49

CSS и JS коды желательно вынести в отдельные файлы.

А размер - тут особо не уменьшить, да и не так важно, т.к. JS выполняется в браузере пользователя, следовательно, Ваш сервер не нагружается.

Каскадный режим \| Линейный режим Настройка спойлера
Автор	Сообщение