Управление слайдами Up и SlideDown

Я создаю аккордеонное меню с помощью JQuery.
До сих пор я мог это сделать, но только с одним открытым подсписком за раз, и мне нужно оставить столько, сколько я хочу.

Мне нужно slideUp() только то меню, которое я нажал, а не все...

Вот мой Codepen, где вы можете увидеть работающий код.

Как видите, когда вы открываете одно подменю, вы закрываете все остальные. Я знаю, что это из-за этой строки кода:

$(".prof-list ul").slideUp();

Я просто не могу найти способ сделать то, что хочу... Когда я нажимаю на тег H3 или конкретный тег li. Как я могу закрыть только его, а все остальное оставить как есть (закрыто/открыто).


jquery slide
person PlayHardGoPro    schedule 11.08.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте использовать slideToggle() для текущего элемента,

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Slide up all the elements of the list
        //$(".prof-list ul").slideUp();// comment this
        //Slide down the elements below the H3 clicked - only if closed
        //if(!$(this).next().is(":visible")) // comment this
        {
            $(this).next().slideToggle();// use slideToggle here
        }
    });
});

Демо

Упрощенный код,

$(document).ready(function(){
    $(".prof-list h3").click(function(){
        //Toggle only current container's content
        $(this).next().slideToggle();
    });
});
person Rohan Kumar    schedule 11.08.2015
comment
У этого slideToggle() есть какая-то несовместимость? - person PlayHardGoPro; 11.08.2015
comment
Нет, это похоже на другие функции, доступные в jQuery, такие как slideUp(), slideDown() и т. д. - person Rohan Kumar; 11.08.2015

arrow_upward
1
arrow_downward

Просто оставьте только одну строку в click event, как показано ниже, и удалите остальные.

$(".prof-list h3").click(function(){
        $(this).next().slideToggle();
})

Напишите здесь

person Guruprasad J Rao    schedule 11.08.2015
comment
Потрясающе... Спасибо, приятель! Есть ли у этого slideToggle() какая-то несовместимость? - person PlayHardGoPro; 11.08.2015
comment
В любое время.. Удачного кодирования.. несовместимость? насколько мне известно, нет.. :) может быть, вам нужно проверить работу IE!! - person Guruprasad J Rao; 11.08.2015

arrow_upward
0
arrow_downward

Вот рабочий пример кода, который вы можете использовать повторно. здесь я добавил ID для родительского элемента UL в виде списка

var pre;
    $(document).ready(function() {

        $("#list").find("ul").hide();

         pre = $("#list").find("ul:first");
        pre.show();

        $("#list").find("h3").each(eachItem);

    });

    eachItem = function(key, val) {

        console.log(val);

        $(val).click(function(e) {



            $(e.target).parent().find("ul").slideDown();
            pre.hide();
            pre = $(e.target).parent().find("ul");

        });

    }
person Akhil    schedule 11.08.2015