JQuery переключение поведения вложенного списка - PullRequest
Новая
       6

JQuery переключение поведения вложенного списка

1 голос
/ 21 октября 2010

У меня есть несколько вложенных списков, и некоторые jQuery, которые показывают, скрывает их при нажатии родительского заголовка.

ЭТО работает нормально, но поведение немного неправильное. Если вложенный список виден и щелкается родительский заголовок, я бы хотел, чтобы этот вложенный список был скрыт. В данный момент он делает это, но затем сразу же показывает вложенный список.

Пожалуйста, смотрите этот jsFiddle для рабочего кода:

http://www.jsfiddle.net/4kG2b/

Ответы [ 2 ]

2 голосов
/ 21 октября 2010

Смотрите здесь: http://www.jsfiddle.net/dactivo/c3vPa/

Мы проверяем, видим ли он, и в этом случае скрываем его: 

 if( $nestList.is(':visible'))

Это будет код: 

 $("#expander ul").hide();
    $("#expander h4").live("click", function(e) {

        var $this = $(this);
        var $nestList = $($this).parent().find("ul");
        var $scrollPane = $(".scroll");

        // hide visible nested lists
        $("#expander ul:visible").hide("fast", function(){
            $(this).closest("li").removeClass("open").addClass("closed");
        });
        // show this list
        if( $nestList.is(':visible'))
        {
          $nestList.hide();   
        }
        else
        {
        $nestList.show("fast", function() {
            $(this).closest("li").removeClass("closed").addClass("open");
        });
        }
        // resize scrollbars
        $scrollPane.jScrollPane();

        e.preventDefault();
    });
1 голос
/ 21 октября 2010

Вы можете запустить шоу, если брат <ul> в настоящее время скрыт (фактически делает его переключателем), например: 

    $nestList.filter(":hidden").show("fast", function() {
        $(this).closest("li").removeClass("closed").addClass("open");
    });

Вы можете проверить это здесь . В целом вы можете уменьшить его и получить тот же эффект, например, так: 

$("#expander ul").hide();
$("#expander h4").live("click", function() {
    $(this).siblings("ul").toggle("fast", function(){
        $(this).closest("li").toggleClass("open closed");
    }).closest("li").siblings(".open").toggleClass("open closed")
                    .children("ul").hide("fast");

    $(".scroll").jScrollPane();
});

Вы можете попробовать эту версию здесь .

...