КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Список-гармошка на jQuery

Сегодня сделаем список-гармошку, точно такую же как виджет аккордеон библиотеки jQuery UI, только самостояткльно. Для этого нам нужно будет подключить jQuery и написать всего лишь несколько строчек кода) Помещаем в див класса wrap наши новости: заголовки h1 новостей под каждым из которых будет текст нашей новости в теге параграфа. Не забыв подключить джейквери создаём файл js/script.js
И в нём уже обернув код в конструкцию DOM-Ready пишем такой код:
$(function(){
  $('p').hide();
  $('h1').click(function(){
    $(this).next().slideToggle('slow').siblings('p:visible').slideUp('slow');
  });
});
сначала скрываем все параграфы (так как они у меня одни на странице. я им класса не давал, но если это всё будет у вас на странице, то понадобится). Дальше пишем что у нас будет происходить при клике на заголовок h1: вешаем на каждый следующий элемент (в данном случае - на параграф функцию slideToggle, которая будет медленно показывать и скрывать его при каждом повторном клике). Дальше находим все братские (siblings)видимые параграфы и сворачиваем их методом slideUp. Вот и все дела, спасибо за внимание :)
2015.03.29 223
jpgjpg

Объявление: "Программистка-индивидуалка. Выезд, апартаменты. Классика, реверс-инжениринг, глубокий кодинг без ТЗ. Звони! Есть подруга бизнес-аналитик".
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика