0

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

代码运行良好.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)会更改为父级。

4

1 回答 1

1

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

$drillDownListItem.live('click', function() {
    options.$this = $(this);
    if(!$(this).children("ul").is(":visible"))
    {
        showChildren(options);
    }
    else
    { 
        hideChildren(options);
    }
    return false;
});
于 2012-10-18T07:14:07.340 回答