Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Меню слайдер. Замена hover на click (https://javascript.ru/forum/jquery/59791-menyu-slajjder-zamena-hover-na-click.html)

melst 26.11.2015 18:34

Меню слайдер. Замена 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);
        }
    );
});


Этот код понимаю, но...

Заранее спасибо.

рони 26.11.2015 18:51

melst,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

melst 26.11.2015 18:58

Прошу прощения, но не получается.

рони 26.11.2015 19:01

melst,
нажать
нажать переместить код

melst 26.11.2015 19:05

Цитата:

Сообщение от рони (Сообщение 397780)
melst,
нажать
нажать переместить код

Благодарю. А я в ручную тэги писал и ничего...

рони 26.11.2015 19:12

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  первый блок третий
            });

melst 26.11.2015 19:49

Спасибо. Попробуем разобраться.

melst 27.11.2015 12:13

Здравствуйте, Рони

$(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  первый блок третий   С эти тоже не разобрался.
            });


Посмотрите, пожалуйста, правильно я хотя бы размышляю в комментариях? Синтаксис, конечно, темный лес для меня))

рони 27.11.2015 12:24

Цитата:

Сообщение от melst
// не совсем еще понял что есть this (текущий объект или документ??)

this это li на который нажали
Цитата:

Сообщение от melst
// присваивается состояние будто нажата кнопка мыши?

если кликнут новый li, то закрыть старый до этого нажатый
.eq(5) выбрать нужный li и открыть click()
в коде html li идут слева на право 0, 1, 2, ... но из-за css их порядок визуально наоборот, именно об этом было уточнение.
Цитата:

Сообщение от melst
// удаляется переменная

именно этим обеспечивается закрытие открытие
проверкой тут
Цитата:

Сообщение от melst
if(cur != this){ // не совсем еще понял что есть this (текущий объект или документ??)


melst 27.11.2015 13:04

Цитата:

Сообщение от рони (Сообщение 397830)
this это li на который нажали

если кликнут новый li, то закрыть старый до этого нажатый
.eq(5) выбрать нужный li и открыть click()
в коде html li идут слева на право 0, 1, 2, ... но из-за css их порядок визуально наоборот, именно об этом было уточнение.

именно этим обеспечивается закрытие открытие
проверкой тут

Спасибо за подробное объяснение. Давно уже на форумах не встречал столь отзывчивого человека))


Часовой пояс GMT +3, время: 04:24.