Инструменты jQuery: как открыть / закрыть аккордеонный раздел? - PullRequest
Новая
       37

Инструменты jQuery: как открыть / закрыть аккордеонный раздел?

0 голосов
/ 23 марта 2012

Вот моя проблема.

Я создал прекрасно работающий аккордеон, используя jQuery Tools. С ним очень легко работать.

Клиент возвращается и говорит, что теперь аккордеоны должны быть разборными, чего не было в оригинальной спецификации. К сожалению, JQuery Tools не имеет встроенной функциональности, поэтому я работаю над своим собственным кодом.

Я подошел близко, но ничего не работает на 100%. Я создал JSFiddle моего кода здесь: http://jsfiddle.net/4ubZs/15/

Код свёртывания работает нормально. 

// Code to collapse accordions
$("#accordion > h2").click(function(){
if (this.className == "current") {
    $(this).removeClass("current");
    $(this).next("div").slideToggle("slow");
} else {

Проблема заключается в открытии. Я попытался открыть 2 разных решения. Первый блок кода пытается использовать API инструментов. Он не будет повторно открывать недавно закрытую вкладку, но будет работать, если я заменю «current_tab» на фактический номер индекса в вызове .click (), но не если я попытаюсь получить индекс программно. 

var api = $("#accordion").data("tabs");
var current_tab = api.getIndex(this);
api.click(current_tab);

Второй блок пытается обойти API-инструменты jQuery и работает, однако при открытии я получаю двойную анимацию, которая, как я предполагаю, противоречит функциональности инструментов jQuery. 

$(this).parent().children("h2").removeClass("current");
$(this).parent().children("div").slideUp("slow");
$(this).toggleClass("current");
$(this).next("div").slideToggle("slow");

Если кто-то может указать, что я делаю неправильно, это будет ОГРОМНАЯ помощь.

Спасибо!

Edit: Думая об этом больше, первый блок «вновь открыть» код не работает имеет смысл. Поскольку я просто удаляю классы из открытого аккордеона, я на самом деле не говорю jQuery Tools, что он закрыт. Поэтому, когда я нажимаю на него, чтобы открыть его, насколько известно jQuery Tools, этот аккордеон уже открыт и не нуждается в открытии снова. Я думаю, мне нужно найти способ сообщить jQuery Tools, что аккордеон закрыт и этот код будет работать.

Ответы [ 2 ]

1 голос
/ 04 июля 2016

В моих поисках «закрыть вкладки jQuerytools при повторном нажатии» я продолжал находить эту публикацию. jQuerytools обновил свой основной код, и хотя вышеуказанный код будет работать для предыдущих версий, я написал новый проход под названием «closeOnClick» для соответствия стилю пользовательского интерфейса jQuery. 

        $el.tabs(
        ".envs div.panes",
        {
            tabs: "h3",
            effect: 'slide',
            collapse: false,
            closeOnClick: true,
            initialIndex: null
        }
    );

https://jsfiddle.net/googabeast/co8nxm8y/

Код Tabs.js был извлечен непосредственно из github jQuerytools

0 голосов
/ 23 марта 2012

Я нашел этот код: http://pastie.org/1421642/wrap Я применил этот плагин jquery и смог успешно заставить его работать. Спасибо всем, кто мог в это разобраться!

...