Question

我正在努力实现一种向下钻取列表的功能。

代码在.toggle()下正常运行，但我的下钻列表项来自AJAX请求，因此我尝试在.live('click')事件上编写基本的自定义切换。

现在的问题是代码在if和else块中都在执行。

我的javascript代码如下：

$(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"});
    }
}

不知道为什么会发生这种情况，但是在调试时，

if块（showChildren()）执行后，控件跳转到else块（hideChildren()），值$(this)为改为父母。

Answer 1

根据您的描述，听起来您的点击事件正在冒泡。返回false以防止这种情况：

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

执行if和else块的javascript代码

1 个答案: