Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2011, 16:22
Новичок на форуме
Отправить личное сообщение для kismedia Посмотреть профиль Найти все сообщения от kismedia
 
Регистрация: 30.07.2010
Сообщений: 9

При наведении на определенный блок, DIV, появляется скрытое сожержимое
Всем привет!
Я не силен в javascript, но часто приходится находить, использовать разные полезные и интересные решения для своих сайтов.

На данный момент работаю над каталогом сайтов Инфо-Рунет.

Решил осуществить такую задачу, нигде не видел готового решения.

Сделать появление скрытого содержимого, по схеме на подобии блоков с вкладками (табами), пример.
Но, не при наведении на ссылку или по щелчку, а при наведении курсора на определенный блок, на подобии этого примера.

То есть при наведении на блок как бы вылезает снизу дополнительное скрытое содержимое. До этого его нет.

Надеюсь, я правильно сформулировал задачу и суть затеи понятна.

Может ли кто помочь в написании данного скрипта?
Или возможно есть какие то подобные решения?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 13.09.2011, 20:33
Аватар для yashka525
Mr. Jacob
Отправить личное сообщение для yashka525 Посмотреть профиль Найти все сообщения от yashka525
 
Регистрация: 20.01.2011
Сообщений: 194

Сообщение от kismedia
не при наведении на ссылку
Сообщение от kismedia
при наведении на блок как бы вылезает снизу дополнительное скрытое содержимое
То есть это как?

И еще, Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если Вы все же хотите, чтобы Вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела. Просто посмотрите какой код на тех ссылках и попробуйте разобратся что к чему.
Ответить с цитированием
  #3 (permalink)  
Старый 13.09.2011, 22:36
Новичок на форуме
Отправить личное сообщение для kismedia Посмотреть профиль Найти все сообщения от kismedia
 
Регистрация: 30.07.2010
Сообщений: 9

Да, согласен, с нуля никто просто так писать не будет.

Подумал тут, а может через смену стиля блока просто реализовать.

<div onmouseover="this.className='blocksiteh'" onmouseout="this.className='blocksite'" >


При наведении сейчас вот цвет меняется, можно еще поиграть со стилем.

Если получится реализовать, так просто, напишу, покажу пример.

Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2011, 23:30
Новичок на форуме
Отправить личное сообщение для kismedia Посмотреть профиль Найти все сообщения от kismedia
 
Регистрация: 30.07.2010
Сообщений: 9

Нашел вот этот вариант: http://www.s3blog.org/skrytye-bloki.html

Поставил, изменил условие onclick на onmouseover

Вот полный код решения:

<style>
DIV.main_block {
	margin: 0px;
	background-color: #F9F9F9;
	border: 1px #000000 dashed;
	padding: 0px;
	color: #797979;
}
DIV.toggle {
	padding: 5px;
	cursor: pointer;
}
DIV.this_block_is_hidden {
	background-color: #FFFFFF;
	border-top: 1px #000000 dashed;
	padding: 5px;
	color: #000000;
	display: none;
}
</style>

<script>
function openBlock(el) {
	var kids = el.parentNode.childNodes;
	for (var k = 0; k < kids.length; k++) {
		var child = kids[k];
		if (child && child.className == "this_block_is_hidden") {
			if (child.style.display != 'block') {
				child.style.display = 'block';
			} else {
				child.style.display = 'none';
			}
		}
	}
}
</script>
<div class="main_block">
	<div onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это первый скрытый блок</div>
</div>

<br>

<div class="main_block">
	<div onclick="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это второй скрытый блок</div>
</div>


И оно реально работает,
Но, у меня:

<div onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>

Здесь еще несколько DIV-ов!
<div class="this_block_is_hidden">это первый скрытый блок</div>


Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?

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

Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2011, 00:43
Аватар для yashka525
Mr. Jacob
Отправить личное сообщение для yashka525 Посмотреть профиль Найти все сообщения от yashka525
 
Регистрация: 20.01.2011
Сообщений: 194

Сообщение от kismedia
Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?
Что-то не понял вопроса...
Ответить с цитированием
  #6 (permalink)  
Старый 14.09.2011, 01:07
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

Сообщение от kismedia Посмотреть сообщение
у меня:

<div onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>

Здесь еще несколько DIV-ов!
<div class="this_block_is_hidden">это первый скрытый блок</div>


Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?
Первый элемент с таким же классом надо полагать?
В цикле по ключу:
if(k == 0) child.doSomething();
Ответить с цитированием
  #7 (permalink)  
Старый 14.09.2011, 07:53
Новичок на форуме
Отправить личное сообщение для kismedia Посмотреть профиль Найти все сообщения от kismedia
 
Регистрация: 30.07.2010
Сообщений: 9

Цитата:
Первый элемент с таким же классом надо полагать?
Ну получается да, первый элемент с классом "this_block_is_hidden" после текущего, в котором задан, собственно, задан onmouseover="openBlock(this);".

Я так понимаю, что в выше приведенном примере, открывается второй див, дочерний как бы?
Ответить с цитированием
  #8 (permalink)  
Старый 10.02.2015, 12:23
Аспирант
Отправить личное сообщение для Jimmi Посмотреть профиль Найти все сообщения от Jimmi
 
Регистрация: 28.02.2014
Сообщений: 53

Сообщение от kismedia Посмотреть сообщение
<style>
DIV.main_block {
	margin: 0px;
	background-color: #F9F9F9;
	border: 1px #000000 dashed;
	padding: 0px;
	color: #797979;
}
DIV.toggle {
	padding: 5px;
	cursor: pointer;
}
DIV.this_block_is_hidden {
	background-color: #FFFFFF;
	border-top: 1px #000000 dashed;
	padding: 5px;
	color: #000000;
	display: none;
}
</style>

<script>
function openBlock(el) {
	var kids = el.parentNode.childNodes;
	for (var k = 0; k < kids.length; k++) {
		var child = kids[k];
		if (child && child.className == "this_block_is_hidden") {
			if (child.style.display != 'block') {
				child.style.display = 'block';
			} else {
				child.style.display = 'none';
			}
		}
	}
}
</script>
<div class="main_block">
	<div onmouseover="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это первый скрытый блок</div>
</div>

<br>

<div class="main_block">
	<div onclick="openBlock(this);" class="toggle">Нажмите, что бы раскрыть блок.</div>
	<div class="this_block_is_hidden">это второй скрытый блок</div>
</div>


Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?
Ответить с цитированием
  #9 (permalink)  
Старый 22.05.2015, 12:45
Новичок на форуме
Отправить личное сообщение для winterpsv Посмотреть профиль Найти все сообщения от winterpsv
 
Регистрация: 22.05.2015
Сообщений: 1

Сообщение от Jimmi Посмотреть сообщение
Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?
а псевдокласами css почему не пользуешся ":hover" допустим
при наведении на блок visibility: visible; а без ховера visibility: hidden;
Ответить с цитированием
  #10 (permalink)  
Старый 22.05.2015, 19:15
Аватар для Leon-on12
Аспирант
Отправить личное сообщение для Leon-on12 Посмотреть профиль Найти все сообщения от Leon-on12
 
Регистрация: 07.04.2015
Сообщений: 65

Карточка товара при наведении
Так же подробно и долго писать лень. Но вам выговор.
Можете заметить что старожилы этого форума не откликнулись на ваш пост. Это потому что проблема гуглиться, это во перых, а во вторых потому что такая же темя не уплыла даже на вторую страницу.

Гуглиться эта тема по запросу "раскрывающееся меню"

Последний раз редактировалось Leon-on12, 22.05.2015 в 19:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Обращение к стилю(Спойлер) Кирюха =) Элементы интерфейса 3 29.07.2011 14:50
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59