Question

I’m trying to get achieve a drilldown list kind of functionality.

The code runs fine with the .toggle(), but my drill-down list items are coming from an AJAX request, so I tried to write a basic custom toggle on the .live('click') event.

The problem now is that the code is executing in both the if and else blocks.

My javascript code as below:

$(document).ready(function(){
    var $drillDownListItem = $("li.listItem");
    var flag = 0;

    var options = {
        $this: ""
    };

    $drillDownListItem.live('click', function() {
        options.$this = $(this);
        if(!$(this).children("ul").is(":visible"))
        {
            showChildren(options);
        }
        else
        { 
            hideChildren(options);
        }
    });

    $drillDownListItem.each(function() {
        if ($(this).children("ul").length > 0) {
            $(this).css({
                "padding-bottom": "0px"
            });
            $(this).children("ul").hide();
            $(this).children("span:first-child").css({
                "padding-bottom": "11px"
            });
        }
    });
});

var showChildren = function(options) {
    if (options.$this.children("ul").length > 0) {
        options.$this.css("background-image", "url(./images/dropDownDown.png)");
        options.$this.children("ul").slideDown(500);
        //options.$this.children("span:first-child").css({"padding-bottom": "6px", "float": "left"});
    }
}
var hideChildren = function(options) {
    if (options.$this.children("ul").length > 0) {
        options.$this.css("background-image", "url(./images/sideArrow.png)");
        options.$this.children("ul").slideUp(500);
        //options.$this.children("span:first-child").css({"padding-bottom": "6px", "float": "left"});
    }
}

Have no idea why this is happening, while debugging however,

once the if block (showChildren()) is done executing, the control jumps into the else block (hideChildren()) and the value of $(this) is changed to the parent.

Answer 1

From your description, it sounds like your click event is bubbling up. Return false to prevent this:

$drillDownListItem.live('click', function() {
    options.$this = $(this);
    if(!$(this).children("ul").is(":visible"))
    {
        showChildren(options);
    }
    else
    { 
        hideChildren(options);
    }
    return false;
});