S3.Blog :: JavaScript: Скрытые блоки

подробнее
JavaScript: Скрытые блоки

Дата последнего изменения: 8 Сентября 2009
Метки статьи: , , ,

На многих сайта, особенно на форумах, вы, наверное, не раз видели скрытые блоки, которые раскрываются при клике на них.
Практически все они построены по одному принципу: внутри общего DIV находятся два других - один, это панель для нажатия, во-втором скрытый текст.

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: все 6 5 4 3 ... 1

10 Февраля 2015 (12:59:46)

Александр • ответить

в div добавьте это:
onmouseout="openBlock(this, true);"

а в javascript это: function openBlock(el) {
замените на это: function openBlock(el, is_hide) {

а это: if (child.style.display != 'block') {
замените на это: if ((! is_hide) && (child.style.display != 'block')) {

14 Мая 2015 (18:46:31)

Сергей (гость) • ответить

Добрый вечер. Подскажите пожалуйста, как реализовать так, чтобы открывал не дочерний div, а в другом месте на сайте. У меня такая структура кода:

<td class="minfo"> <i onclick="openBlock(this);" class="fa fa-chevron-down"></i></div></td>
</tr>
<tr><div class="this_block_is_hidden">это первый скрытый блок</div></tr>

Следовательно, скрипт не может его открыть.

В JavaScript поверхностно, поэтому был бы благодарен за помощь

Спасибо)

14 Мая 2015 (19:32:30)

Александр • ответить

тут без id не обойтись, в вашем случае это будет примерно так:

<tr><td class="minfo">
	<i onclick="openBlock(document.getElementById('my_menu_1'));" class="fa fa-chevron-down"></i>
</td></tr>
<tr><td>
	<div><div id="my_menu_1" class="this_block_is_hidden">это первый скрытый блок</div></div>
</td></tr>

14 Мая 2015 (19:37:25)

Сергей (гость) • ответить

Спасибо за ответ. У меня порядка 50 блоков (всегда разное значение) раскрывается на одной странице. Ну что поделать, буду привязывать id.

Спасибо еще раз)

14 Мая 2015 (19:51:37)

Сергей (гость) • ответить

Есть возможно готовое (не сильно грамоздкое) решение в виде формирования ID у блок, как в примере в вашем посте?


<div>
	<div onclick="openBlock('4efdea3a6c787b89')">Нажмите, что б раскрыть блок</div>
	<div id="4efdea3a6c787b89" style="display: none;">текст текст текст</div>
</div>

14 Мая 2015 (19:59:45)

Александр • ответить

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

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

вы можете только облегчить конструкцию немного изменив скрипт:


<tr><td class="minfo">
	<i onclick="openBlock('my_menu_1');" class="fa fa-chevron-down"></i>
</td></tr>
<tr><td>
	<div id="my_menu_1" class="this_block_is_hidden">это первый скрытый блок</div>
</td></tr>

и измените скрипте на это:

<script>
function openBlock(el_id) {
	var child = document.getElementById(el_id);
	if (child) {
		// если блок не виден, то показать его
		if (child.style.display != 'block') {
			child.style.display = 'block';
		} 
		// иначе скрыть его
		else {
			child.style.display = 'none';
		}
	}
}
</script>

14 Мая 2015 (20:15:19)

Сергей (гость) • ответить

Просто количество блоков все время разное, у схожих сайтов с моей тематикой формируется через ID, видимо и мне придется также поступать)

пример:

Я не особо в javascript, поэтому и спрашивал ссылочку на какой нибудь интересный пример для реализации открывания блоков через ID

14 Мая 2015 (20:22:34)

Александр • ответить

дык, я вам и дал простой пример открывания без десятков килобайт кода в виде jQuery и прочего

6 Апреля 2016 (16:24:34)

михаил (гость) • ответить

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

6 Апреля 2016 (16:44:01)

Александр • ответить

посмотрите комментарий от 3 Февраля 2011

S3.Blog

подробнее JavaScript: Скрытые блоки

Похожие материалы:

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS Комментарии: все 6 5 4 3 ... 1

подробнее
JavaScript: Скрытые блоки

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: все 6 5 4 3 ... 1