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()にジャンプし、の値が親に変更されます。elsehideChildren()$(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 に答える