Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   При наведении на определенный блок, DIV, появляется скрытое сожержимое (https://javascript.ru/forum/dom-window/21524-pri-navedenii-na-opredelennyjj-blok-div-poyavlyaetsya-skrytoe-sozherzhimoe.html)

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

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

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

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

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

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

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

Спасибо!

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

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

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

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

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

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

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


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

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

Спасибо!

kismedia 13.09.2011 23:30
Нашел вот этот вариант: 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")?

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

Спасибо!

yashka525 14.09.2011 00:43
Цитата:
Сообщение от kismedia
Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?
Что-то не понял вопроса... :-?

Триви 14.09.2011 01:07
Цитата:
Сообщение от kismedia (Сообщение 126362)
у меня:

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

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


Как в данном случае правильно идентифицировать именно этот див ("this_block_is_hidden")?
Первый элемент с таким же классом надо полагать?
В цикле по ключу: 
if(k == 0) child.doSomething();

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

Я так понимаю, что в выше приведенном примере, открывается второй див, дочерний как бы?

Jimmi 10.02.2015 12:23
Цитата:
Сообщение от kismedia (Сообщение 126362) 
<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>


Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?

winterpsv 22.05.2015 12:45
Цитата:
Сообщение от Jimmi (Сообщение 355944)
Как изменить код, что-бы во время отведения курсора спрятанный блок прятался?
а псевдокласами css почему не пользуешся ":hover" допустим
при наведении на блок visibility: visible; а без ховера visibility: hidden;

Leon-on12 22.05.2015 19:15
http://javascript.ru/forum/dom-windo...navedenii.html
Так же подробно и долго писать лень. Но вам выговор.
Можете заметить что старожилы этого форума не откликнулись на ваш пост. Это потому что проблема гуглиться, это во перых, а во вторых потому что такая же темя не уплыла даже на вторую страницу.

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


Часовой пояс GMT +3, время: 08:16.