Всем привет!
Сейчас я покажу вам как легко создавать блоки которые появляются/исчезают по клику на другом объекте. Обычно они используются в меню, подсказках появляющихся при клике на элемент или просто когда надо скрыть по умолчанию какой-то блок.
Для начала создаем ссылку или абзац и задаем им id или class, чтобы можно было к ним обратиться.
После этого вставляем в вот такой код в страницу:
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $(".hider").click(function(){ $("#hidden").slideToggle("slow"); return false; }); }); // ]]></script> <a class="hider">Ссылка</a> <p class="hider">Абзац</p> <div id="hidden" style="display: none;"> Некий текст содержащийся в данном блоке. По умолчанию он скрыт благодаря свойству display: none;</div> |
<div id="hidden" style="display: none;">
Некий текст содержащийся в данном блоке.
По умолчанию он скрыт благодаря свойству display: none;</div>
А затем, вставляем сам блок задав ему id или class, и добавляем свойство display: none;
Благодаря простоте jQuery можно заменить событие, чтобы блок появлялся, например, по наведению курсора, или можно сделать более плавную/быструю анимацию, а уж если использовать animation то тут уже все зависит только от вашей фантазии.
таким образом можно показывать/скрывать любые элементы.
Ниже вы можете посмотреть как это работает.
Абзац
Здравствуйте.
Что-то у меня не этот скрипт не работает
Здесь нужно использовать библиотеку jquery?
а то я просто скопировал и вставил.
Здравствуйте, Алексей.
Да, вам необходимо подключить jQuery для использования этого скрипта.
А как сделать несколько блоков???
Алексей, вы можете или добавить всем блокам уникальные ID и повесить на каждый обработчик как в примере, или поменять верстку и переписать примерно так: скрываемый блок помещаем внутрь того по которому надо кликнуть, и делаем обработчик типа
$(«.hider»).click(function(){
$(this).children(«.hidden»).slideToggle(«slow»);
return false;
});
таким образом мы при неограниченном количестве групп блок->вложенный блок скрываем/разворачиваем вложенный блок по клику на родителя.
Здравствуйте, а можно ли в данном блоке размещать другие блоки?
Да, в этом блоке можно разместить что угодно.
Здравствуйте! Подскажите пожалуйста как можно менять фон. изображение данного блока при раскрытии/скрытии (плюс на минус)
Можно или добавлять нужные стили через css, например, $(«#element»).css({‘background’:’#f00′,’border’:’1px solid #0f0′}) или добавлять/убирать классы через addClass/removeClass.
Добрый день!
Вот такие вопросы
1. Я сделал через родителей, можно ли в children сделать активной ссылку? Сейчас я щёлкаю по ссылке и всё сворачивается назад
2. Как разнести выплывающие блоки стоящих рядом по горизонтали, если пользователь нажмёт сначала на одного родителя, его children появится, а потом нажмёт на соседнего родителя и появится его children, который разместится поверх ранее вызванного
Спасибо
Дополнение ко 2 вопросу
Как сделать чтобы по щелчку на другом блоке, сворачивался уже открытый
Здравствуйте.
1) проверьте селекторы которые используете в блоках, видимо не правильно обрабатываются и поэтому сворачивается блок
2) наплыв блоков может быть из-за неправильного позиционирования, проверьте стили блоков, возможно у них, например, стоит position: absolute;
Для скрытия всех открытых блоков им надо задать какой-то класс и при клике по новому элементу сперва сворачивать все элементы с этим классом, а потом уже разворачивать новый
Спасибо за ответы
Но ситуация несколько поменялась
Как сделать, чтобы открытый блок закрывался при щелчке вне его, или на другом блоке, при этом раскрывался новый блок заменяя свернувшийся на том же месте и при этом ссылки внутри открывающихся блоков оставались активными
Можно повесить на контейнер содержащий ваши блоки обработчик клика по которому реализуется нужная вам логика, например, сворачивается текущий блок и раскрывается следующий за ним.
Хорошо бы ещё сам скрипт jquery отдельным файлом.
Сам скрипт можно подключить с CDN гугла или яндекса или скачать с официального сайта jquery.com
Здравствуйте, как сделать , чтоб при клике на определённый элемент появляющийся блок смещал блок ниже его на определённые координаты?
Не понял, что именно должно получиться. Попробуйте так:
$(document).ready(function(){ $(".hider").click(function(){ // выбираем следующий элемент и задаем ему координаты $(this).next().css({"top":10,"left":20}); return false; }); });