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

@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. Если не сложно посоветуйте может литературу какую, чтоб по пути на работу не в телефоне играть, а ликбезом заниматься

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@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