S3.Blog

29 Марта 2024
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

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

Дата последнего изменения: 8 Сентября 2009
Метки статьи: Готовые решения, HTML, JavaScript, © Авторское
На многих сайта, особенно на форумах, вы, наверное, не раз видели скрытые блоки, которые раскрываются при клике на них.
Практически все они построены по одному принципу: внутри общего DIV находятся два других - один, это панель для нажатия, во-втором скрытый текст.


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




Александрответить
в 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')) {
Сергей (гость) • ответить
Добрый вечер. Подскажите пожалуйста, как реализовать так, чтобы открывал не дочерний 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 поверхностно, поэтому был бы благодарен за помощь Спасибо)
Александрответить
тут без 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>

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

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

<div>
<div onclick="openBlock('4efdea3a6c787b89')">Нажмите, что б раскрыть блок</div>
<div id="4efdea3a6c787b89" style="display: none;">текст текст текст</div>
</div>
Александрответить
сформировать 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>
Сергей (гость) • ответить
Просто количество блоков все время разное, у схожих сайтов с моей тематикой формируется через ID, видимо и мне придется также поступать)

пример:


Я не особо в javascript, поэтому и спрашивал ссылочку на какой нибудь интересный пример для реализации открывания блоков через ID
Александрответить
дык, я вам и дал простой пример открывания без десятков килобайт кода в виде jQuery и прочего
михаил (гость) • ответить
Как сделать чтобы при клике на другой блок предыдущий закрывался?
Александрответить
посмотрите комментарий от 3 Февраля 2011

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.