Меню слайдер. Замена hover на click
Здравствуйте.
Сразу скажу, что я в JavaScript новичок, почти ноль. Учусь верстать страницы. Вставил вот такой слайдер аккордеон на jQuery http://werg.hol.es/2013/12/%D0%B3%D0...y-%D0%B8-css3/ Подскажите , пожалуйста, как сделать, чтобы раскрытие происходило по клику, а не по наведению (hover)? И как сделать по-умолчанию один блок открытым. $(function() { $(‘#accordion > li’).hover( function () { var $this = $(this); $this.stop().animate({‘width’:’480px’},500); $(‘.heading’,$this).stop(true,true).fadeOut(); $(‘.bgDescription’,$this).stop(true,true).slideDown(500); $(‘.description’,$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({‘width’:’115px’},1000); $(‘.heading’,$this).stop(true,true).fadeIn(); $(‘.description’,$this).stop(true,true).fadeOut(500); $(‘.bgDescription’,$this).stop(true,true).slideUp(700); } ); }); Этот код понимаю, но... Заранее спасибо. |
melst,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Прошу прощения, но не получается.
|
melst,
нажать ![]() нажать ![]() |
Цитата:
|
Elegant Accordion with jQuery and CSS3
melst,
ок :) $(function() { var cur; $('#accordion > li').click( function () { if(cur != this){ cur && $(cur).click(); cur = this; var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); } else { cur = null; var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } } ).eq(1).click(); // 3 2 1 0 первый блок третий }); |
Спасибо. Попробуем разобраться.
|
Здравствуйте, Рони
$(function() { var cur; // создается переменная $('#accordion2 > li').click( // событие - нажатие на блок li function () { if(cur != this){ // не совсем еще понял что есть this (текущий объект или документ??) cur && $(cur).click(); // присваивается состояние будто нажата кнопка мыши? cur = this; var $this = $(this); $this.stop().animate({'width':'330px'},300); //с этим все ясно $('.bgDescription',$this).stop(true,true).slideDown(300); $('.description',$this).stop(true,true).fadeIn(); } else { cur = null; // удаляется переменная var $this = $(this); $this.stop().animate({'width':'170px'},300); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(700); $('.bgDescription',$this).stop(true,true).slideUp(700); } } ).eq(5).click(); // 3 2 1 0 первый блок третий С эти тоже не разобрался. }); Посмотрите, пожалуйста, правильно я хотя бы размышляю в комментариях? Синтаксис, конечно, темный лес для меня)) |
Цитата:
Цитата:
.eq(5) выбрать нужный li и открыть click() в коде html li идут слева на право 0, 1, 2, ... но из-за css их порядок визуально наоборот, именно об этом было уточнение. Цитата:
проверкой тут Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 04:24. |