Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Как создать спойлер на Javascript

Ответить
Настройки темы
Как создать спойлер на Javascript

Новый участник


Сообщения: 4
Благодарности: 0

Профиль | Отправить PM | Цитировать


Занят разработкой сайта, и возникла такая необходимость:

Имеется таблица, в ней в строках написаны названия программ, и надо, чтобы после нажатия на название программы вниз (типа выезжающего списка) открывался спойлер со скриншотом и описанием.

Прошу помощи, как это осуществить
+ желательно, чтобы при открытии html странички в Dreamweaver все спойлеры были развёрнуты, т.к. программ очень много, и так будет быстрее и легче, чем каждую описывать непосредственно в коде

Заранее благодарен

Отправлено: 07:39, 28-10-2006

 

Новый участник


Сообщения: 4
Благодарности: 1

Профиль | Отправить PM | Цитировать


сталкивался с такой проблемой, набросал для вас код
HTML код: Выделить весь код
<input id=spoil type=hidden value=0> <div id=spoil1 onclick=spoiler(1) style="display:none;">текст 1 спойлера</div> <div id=spoil2 onclick=spoiler(2) style="display:none;">текст 2 спойлера</div> <div id=spoil3 onclick=spoiler(3) style="display:none;">текст 3 спойлера</div>

PHP код: Выделить весь код

function spoiler(n)

 {
  var 
= $("#spoil").val();
  if((
!= o)&&(0))
  {
   $(
'#spoil'+o).hide();
   $(
'#spoil'+n).show();
   
document.getElementById('spoil').value=n;
  } else if(
== 0) {
      $(
'#spoil'+n).show();
        
document.getElementById('spoil').value=n;
  }   else
  {
   $(
'#spoil'+n).hide();
   
document.getElementById('spoil').value=0;
  }
 } 

возможно, присутствуют ошибки, на ходу переделывал, но в целом метод решения такой.
п.с. не плохо бы сделать тег и для js кода
Это сообщение посчитали полезным следующие участники:

Отправлено: 01:34, 31-07-2012 | #21



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Ветеран


Сообщения: 710
Благодарности: 12

Профиль | Отправить PM | Цитировать


Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. Если я не напортачил, конечно...
mr.Morgan, увы, я не смог заставить это работать, но за идею с ('#spoil'+o) огромное спасибо!
Я придумал несколько другой вариант спойлера в надежде, что всё заработает:
HTML код: Выделить весь код
<a onclick="s(this.id)" class="show" id="open1">Open1</a> <a onclick="s(this.id)" class="hide" id="close1">Close1</a> <span onclick="s(this.id)" class="hide" id="content1">Content1</span> <a onclick="s(this.id)" class="show" id="open2">Open2</a> <a onclick="s(this.id)" class="hide" id="close2">Close2</a> <span onclick="s(this.id)" class="hide" id="content2">Content2</span>

PHP код: Выделить весь код

function s(id){

var 
parseInt(id.replace('open',''), 10);
var 
parseInt(id.replace('close',''), 10);
var 
event.target.id || event.srcElement.id
if (t=="open"+o){
document.getElementById("open"+o).className='hide';
document.getElementById("close"+o).className='show';
document.getElementById("content"+o).className='show';
}else if (
t=="close"+c){
document.getElementById("open"+c).className='show';
document.getElementById("close"+c).className='hide';
document.getElementById("content"+c).className='hide';
}else{return}} 

Всё работает отлично, но у меня не получается закрыть все спойлеры.
Я нашёл такую штуку:
PHP код: Выделить весь код

function returnAttributes(at){

var 
arr=[];
var 
elem=document.getElementsByTagName('*'), i=0e;
while(
e=elem[i++]){
e[at]?arr[arr.length]=e[at]:null;
}
return 
arr;
}
onload=function(){
var 
allIds=returnAttributes('id');
alert(allIds);


Этот скрипт создаёт список всех id на странице. Всё, что нужно - это из allIds выбрать все, что подходят по образцу к openN и closeN и для всех тегов с подходящими id задать .className='show' и .className='hide', соответственно. У меня вот с выбором по образцу пока проблема...

Отправлено: 00:28, 02-08-2012 | #22


Ветеран


Сообщения: 27449
Благодарности: 8087

Профиль | Отправить PM | Цитировать


Цитата asus a9rp:
Iska, с .nextSibling я что-то не поладил: <div><a></a></div><span></span> - нельзя получить тэг <a>. »
Всё можно. Просто эта структура:
Код: Выделить весь код
<div>
    <a></a>
</div>
<span></span>
отличается от приведённой выше, где все тэги находились на одном уровне.

Смотрите,
читать дальше »
в процедуре обработки события Вы определяете, от какого элемента оно пришло. У нас есть три случая:

1. От «div».

При этом тэг «div» определяется как элемент, от которого пришло событие:
Код: Выделить весь код
elem=window.event.srcElement;
Тэг «a» определяется, как первый дочерний элемент по отношению к тэгу «div»:
Код: Выделить весь код
elem=window.event.srcElement.firstChild;
Тэг «span» по отношению к тэгу «div» определяется, как следующий элемент в коллекции элементов того же уровня:
Код: Выделить весь код
elem=window.event.srcElement.nextSibling;
Аналогично рассуждаете и для прочих тэгов:
2. От «a».
«div»:
Код: Выделить весь код
elem=window.event.srcElement.parentNode;
«a»:
Код: Выделить весь код
elem=window.event.srcElement;
«span»:
Код: Выделить весь код
elem=window.event.srcElement.parentNode.nextSibling;
3. От «span».
«div»:
Код: Выделить весь код
elem=window.event.srcElement.previousSibling;
«a»:
Код: Выделить весь код
elem=window.event.srcElement.previousSibling.firstChild;
«span»:
Код: Выделить весь код
elem=window.event.srcElement;
Дальше делаете с полученным потребным элементом что угодно.

Два замечания:
* не забывайте, что события «всплывают» по иерархии обработчиков, потому отменяйте сие, где надо («cancelBubble»);
* мои рассуждения касаются прежде всего IE, как модели DOM, так и реализации JavaScript, в классической же интерпретации (стандарт консорциума WWW) могут быть некоторые отличия.

Отправлено: 01:36, 02-08-2012 | #23



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » Как создать спойлер на Javascript

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
как создать телефонный справочник на своем сайте я хочу создать телефонный справочник re5pect Вебмастеру 8 14-07-2008 19:45
как убрать окошко блокирующее javascript Turman Хочу все знать 4 05-11-2006 21:40
Как прочитать на JavaScript текстовый файл? Efremov Вебмастеру 5 11-01-2006 11:27
Как проверить JavaScript'ом наличие Flash??? Krendebobel Вебмастеру 10 28-06-2005 16:17
как в JavaScript передать переменную? Guest Вебмастеру 8 25-08-2004 13:33




 
Переход