Как сделать несколько активных блоков?

@LionMoscow · Регистрация: 05.12.2014

Студворк — интернет-сервис помощи студентам

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

Собственно в чем дело, есть код вроде не особо сложный

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").click(function() {
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>
    <style>
        #panel {    
            display: none;
            padding: 5px;
            width: 400px;
            height: 200px;
            background: #09F;
            color: #FFF;
            }
        .btn-slide {
            background: #CCC;
            color: #06F;
            }
        .active {
            background: #FF9;
            }
    </style>
</head>
<body>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div id="panel">
        Бла бла бла бла текст или ссылка
    </div>

Здесь получается одна ссылка с выползающим текстом, а как сделать их допустим 4 штуки в ряд горизонтально и чтоб под каждым ровненько выползал текст чего-то не втыкаю.

@Kiruxa · 05.12.2014, 16:45

Добавьте еще 3 ссылки.. Ссылка инлайновый элемент, поэтому все ссылки будут расположены в одну строку.
Или может я не совсем поняла вопрос..

@ludmila-sv · 05.12.2014, 20:23

ИМХО, нужно ссылки с соответствующим текстом поместить в див

HTML5
1
2
3
4
5
6
<div>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div class="panel">
        Бла бла бла бла текст или ссылка
    </div>
</div>

Заменить id="panel" на class="panel"

и код подправить

JavaScript
1
2
3
4
5
6
   $(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });

Тут $(this).siblings(".panel") будет ссылаться только на тот блок <div class="panel">, который лежит в одном внешнем диве со ссылкой, по которой кликнули. Поэтому теперь вот таких блоков

HTML5
1
2
3
4
5
6
<div>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div class="panel">
        Бла бла бла бла текст или ссылка
    </div>
</div>

можете поставить на страницу сколько угодно - всё должно работать. Если хотите, чтоб они располагались в строчку, пропишите display: inline-block для дива-обертки.

@LionMoscow · 05.12.2014, 23:39 **[ТС]**

Спасибо, но чего-то не выходит.

Вместо <div id="panel"> написал <div class="panel"> и текст вылез на ружу который "бла бла бла..."

то есть самого экшена не происходит просто ссылка и под ней текст... если просто размножаю блок... с параметром inline-block... они в линию то выстраиваются... но при нажатии на любой блок...

все сползают под первый и текст выезжает только из под первого блока, а как текст назад уползает, обратно в линию выстраиваются, да и при нажатии на первый... тоже самое под ним вылезает текст...но при этом остальные ныряют под него... float: left тоже пробовал...текст выезжать начинает под каждой ссылкой но не под ней а справа...

пробовал и для каждого сделать свой скрипт ... то есть для первого

JavaScript
1
2
3
4
5
6
$(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });

для второго

JavaScript
1
2
3
4
5
6
$(function() {
            $(".btn-slide2").click(function() {
                $(this).siblings(".panel2").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });

и т.д.

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

@ludmila-sv · 05.12.2014, 23:55

Сообщение от LionMoscow

Вместо <div id="panel"> написал <div class="panel"> и текст вылез на ружу который "бла бла бла..."

Вы в стилях-то поменяли #panel на .panel?

Добавлено через 9 минут
Рабочий вариант: http://jsfiddle.net/ludmilasv/g5w9Lf2n/

Добавлено через 3 минуты

Сообщение от LionMoscow

но при нажатии на любой блок...
остальные ныряют под него...

Чтоб не ныряли, надо было поставить абсолютное позиционирование этим блокам, и относительное - родительскому, чтобы расстояния top и left считались от него, а не от body.

@LionMoscow · 06.12.2014, 20:02 **[ТС]**

Вот теперь все супер...спасибо огромное =)

@LionMoscow · 09.12.2014, 01:05 **[ТС]**

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

@Geliorda · 09.12.2014, 01:41

псевдокласс :hover - Это для CSS.
Поможет при наведении.

Для JQuery - поможет mouseover

http://jquery-docs.ru/events/mouseover/

"Данное событие обычно активируется, когда указатель находится в пределах области элемента."

@LionMoscow · 09.12.2014, 02:26 **[ТС]**

Ага...чего-то понял... так как только осваиваю...еще раз прошу прощения за туговатость свою...допустим:

JavaScript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>

я поменял на:

JavaScript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>

то есть функцию .click я поменял на функцию .mouseover

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

и чего то не пойму как правильно это сделать

@ludmila-sv · 09.12.2014, 13:46

Надо добавить точно такую же функцию, но с событием .mouseout.
Дело в том, что Toggle работает так: если элемент виден, slideToggle его прячет, если не виден - показывает.
toggleClass - аналогично: если элемент имеет класс active, toggleClass("active") этот класс уберет, если не имеет - поставит.

@LionMoscow · 09.12.2014, 16:34 **[ТС]**

таакс все вышло...навожу на кнопку выезжает увожу отъезжает)) .. и тут я наткнулся на еще один косячек...мsшку я отвожу и то что выехало сразу уезжает... а если я туда допустим ссылку вставлю то человек нажать не успеет... подскажите куда копать чтоб был эффект такой...навожу --> выезжает панель --> и когда я с панели убираю мышку, а не с кнопки, то она заезжает обратно... я так понимаю мне с кнопки нужно как раз убрать функцию .mouseout и привинтить ее к панели... то бишь добавить к этому коду:

JavaScript
1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        $(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });
    </script>

что-то вроде

JavaScript
1
2
$(function() {
            $(".panel").mouseout(function()

и добавить движение наверх... и опять не хватает чего-то соображалки чего дальше написать в функцию... или вообще не так ?

@ludmila-sv · 09.12.2014, 16:44

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
            $(".btn-slide").mouseover(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
 
    
            $(".panel").mouseout(function() {
                $(this).slideToggle("slow");
                $(this).siblings(".btn-slide").toggleClass("active");
            });
        });

http://jsfiddle.net/ludmilasv/g5w9Lf2n/1/

@LionMoscow · 09.12.2014, 17:33 **[ТС]**

блин....все получилось...но если я добавляю параметр <p> для ссылок(ну чтоб в столбик были) то при наведении на текст окно начинает прыгать туда сюда само...

http://jsfiddle.net/g5w9Lf2n/2/

@ludmila-sv · 09.12.2014, 18:39

Дело в том, что когда Вы добавляете <p> и ставите мышь на этот элемент <p>, то с <div class="panel"> мышь вроде как уходит (переходит на дочерний элемент) - вот оно и дергается.
Т.е. либо надо ставить <br>, а не <p>,
либо, если уж так нужны <p>, пишите mouseleave вместо mouseout. Разница между ними - как раз в учете переходов на дочерние элементы.

@LionMoscow · 09.12.2014, 19:06 **[ТС]**

Безмерно благодарен, вот остановился когда-то на обучении а-ля "последняя страница учебника по информатике"(там где основные теги хтмл написаны)...теперь вот понадобилось и пошли мучения...

Теперь буду пытаться сделать для самой кнопки псевдокласс hover... хочу чтоб красивее было...надеюсь справлюсь

P.S. Если не сложно посоветуйте может литературу какую, чтоб по пути на работу не в телефоне играть, а ликбезом заниматься

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Kiruxa 28 / 28 / 12 Регистрация: 31.01.2011 Сообщений: 311
	05.12.2014, 16:45
	Добавьте еще 3 ссылки.. Ссылка инлайновый элемент, поэтому все ссылки будут расположены в одну строку. Или может я не совсем поняла вопрос.. 0

@LionMoscow 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 12
	06.12.2014, 20:02 [ТС]
	Вот теперь все супер...спасибо огромное =) 0

@LionMoscow 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 12
	09.12.2014, 01:05 [ТС]
	теперь блин другая загвоздка....пытаюсь сделать так чтоб не при нажатии выезжало меню , а при наведении...и собственно уводишь мышку оно закрывается само... только не пойму это в скрипте проблема или в дивах? 0

@Geliorda 1 / 1 / 0 Регистрация: 07.10.2014 Сообщений: 22
	09.12.2014, 01:41
	псевдокласс :hover - Это для CSS. Поможет при наведении. Для JQuery - поможет mouseover http://jquery-docs.ru/events/mouseover/ "Данное событие обычно активируется, когда указатель находится в пределах области элемента." 1

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	09.12.2014, 13:46
	Надо добавить точно такую же функцию, но с событием .mouseout. Дело в том, что Toggle работает так: если элемент виден, slideToggle его прячет, если не виден - показывает. toggleClass - аналогично: если элемент имеет класс active, toggleClass("active") этот класс уберет, если не имеет - поставит. 1

@LionMoscow 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 12
	09.12.2014, 17:33 [ТС]
	блин....все получилось...но если я добавляю параметр <p> для ссылок(ну чтоб в столбик были) то при наведении на текст окно начинает прыгать туда сюда само... http://jsfiddle.net/g5w9Lf2n/2/ 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	09.12.2014, 18:39
	Дело в том, что когда Вы добавляете <p> и ставите мышь на этот элемент <p>, то с <div class="panel"> мышь вроде как уходит (переходит на дочерний элемент) - вот оно и дергается. Т.е. либо надо ставить <br>, а не <p>, либо, если уж так нужны <p>, пишите mouseleave вместо mouseout. Разница между ними - как раз в учете переходов на дочерние элементы. 1

@LionMoscow 0 / 0 / 0 Регистрация: 05.12.2014 Сообщений: 12
	09.12.2014, 19:06 [ТС]
	Безмерно благодарен, вот остановился когда-то на обучении а-ля "последняя страница учебника по информатике"(там где основные теги хтмл написаны)...теперь вот понадобилось и пошли мучения... Теперь буду пытаться сделать для самой кнопки псевдокласс hover... хочу чтоб красивее было...надеюсь справлюсь P.S. Если не сложно посоветуйте может литературу какую, чтоб по пути на работу не в телефоне играть, а ликбезом заниматься 0