Контролиране на slideUp и 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