Основание 5 Аккордеон - скорость перехода?

Я использую Foundation 5 Accordions на сайте. Они работают, но я хочу изменить скорость перехода. В настоящее время, когда вы нажимаете, они мгновенно скрывают одну и показывают другую. Я бы предпочел, чтобы они переходили с момента появления.Основание 5 Аккордеон - скорость перехода?

Я попытался CSS, но это не сработало:

.accordion dd > a{ 
    transition: all .5s; 
}

Примечание: Я опущена префиксы.

Как я могу заставить их перейти плавно?

Если я могу сделать это с чистым CSS, это предпочтительнее, в противном случае JS будет работать, но я не уверен, как это сделать?

источник

2013-12-22 L84

Оказывается JS это способ сделать это:

$(function() { 
$(".accordion").on("click", "dd:not(.active)", function (event) { 
    $("dd.active").removeClass('active').find(".content").slideUp("fast"); 
    $(this).addClass('active').find(".content").slideToggle("fast"); 
}); 
});

источник

2013-12-22 06:34:35 L84

Вы можете использовать эту структуру:

$(function() { 
    $(".accordion").on("click", "dd", function (event) { 

    $("div.active").slideUp(100).removeClass('.active'); 
     $(this).find(".content").slideDown(100).addClass('active'); 

}) 
});

свою работу правильно.

источник

2013-12-22 06:11:54

Это не сработало. – L84

вы можете попробовать новую структуру, переход: все 1 с легкость; –

Не работает. Кроме того, вместо использования 'div' (который я пробовал), я также пробовал' .accordion' и 'dd'. Не работает. Я нашел решение JS, но есть проблема с этим. См. Мое редактирование. – L84

Линда, я оценил свой код, в фундаменте 5, панель остается видимой после второго закрытия. Кажется, это связано с тем, что jQuery добавляет атрибуты стиля из скольжения. Я отредактировал его, чтобы исправить проблему.

$(".accordion").on("click", "dd", function (event) { 
     if($(this).hasClass('active')){ 
      $("dd.active").removeClass('active').find(".content").slideUp("fast");  
     } 
     else { 
      $("dd.active").removeClass('active').find(".content").slideUp("fast"); 
      $(this).addClass('active').find(".content").slideToggle("fast");  
     } 
});

источник

2014-02-07 22:33:15

Это хорошо работает с основанием 5, но я хотел бы расширить его, чтобы мы могли развернуть более одной панели за раз. Сейчас он только расширяет одну панель за раз. – atif

Вот решение, которое является немного более углубленного с JQuery, а также использовать .eq() специально предназначаться только первую позицию (0) a элемент щелкнул через все li элементов. Теоретически это должно работать, если вы добавите конфигурацию multi_expand, так как она нацеливается только на первый элемент a.

$(".accordion li").on("click", "a:eq(0)", function (event) { 
    var li_parent = $(this).parent(); 

     if (li_parent.hasClass('active')) { 
      $(".accordion li div.content:visible").slideToggle("normal"); 
     } else { 
      $(".accordion li div.content:visible").slideToggle("normal"); 
      $(this).parent().find(".content").slideToggle("normal"); 
     } 
    });

Заслуга Неманья Andrejevic on the Foundation forums.Примечание: это с помощью Foundation 5.5 разметки. Если вы используете предыдущие версии, просто замените все виды использования li на dd.

источник

2015-07-21 18:11:07

Основание 5 Аккордеон - скорость перехода?

ответ

Смежные вопросы