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

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

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

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

HTML5

<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

<div>
    <a href="" class="btn-slide">ссылка или картинка</a>
    <div class="panel">
        Бла бла бла бла текст или ссылка
    </div>
</div>

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

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

Javascript

   $(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });

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

HTML5

<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

$(function() {
            $(".btn-slide").click(function() {
                $(this).siblings(".panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });
        });

для второго

Javascript

$(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

<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

<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

<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

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

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

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

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

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	05.12.2014, 23:55	5
	Сообщение от LionMoscow Вместо <div id="panel"> написал <div class="panel"> и текст вылез на ружу который "бла бла бла..." Вы в стилях-то поменяли #panel на .panel? Добавлено через 9 минут Рабочий вариант: http://jsfiddle.net/ludmilasv/g5w9Lf2n/ Добавлено через 3 минуты Сообщение от LionMoscow но при нажатии на любой блок... остальные ныряют под него... Чтоб не ныряли, надо было поставить абсолютное позиционирование этим блокам, и относительное - родительскому, чтобы расстояния top и left считались от него, а не от body. 1

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

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

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

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

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