javascript - JQUERY 下拉 Div 问题

Question

我有 Accordion ，效果很好。与每个 Accordion 标题一致的是另一个 div，它根据数据库中的值给出完整或不完整的状态。

当用户点击一个状态时，会出现一个下拉菜单，其中包含一个链接以更改当前元素的状态。它通过检查 的子元素是否具有类“complete”来做到这一点。根据返回 true 还是 false，不同的内容 append 到下拉 div。

我将我的代码上传到 fiddle ，但是下拉按钮不起作用，但它在我的电脑上工作正常。

到目前为止，我用我的代码完成的是，当用户单击某个状态时，下拉菜单会显示正确的状态更改链接。此外，如果用户已经打开了一个下拉菜单，并且他们单击了另一个 Accordion 上的状态栏，则前一个会在新的打开之前关闭。

我还想完成的是，当用户点击下拉列表外的任何地方时，它会关闭并被删除。

我该怎么做？

这是一个 fiddle :http://jsfiddle.net/mickzer/3MbRJ/4/

和 JQUERY

$(".status").live('click',function () {

    $(".change-status").fadeOut("normal", function() {
        $(this).remove();
    });

    var checkComplete=$(this).children().hasClass("complete");

    var changeStatus="<div class=\"change-status\"></div>";
    $(this).after(changeStatus);
    $(".change-status").hide();
    $(".change-status").fadeIn();

    if(checkComplete) {

        var statusType="<p class=\"mark\">Mark as Incomplete</p>";
        $(statusType).appendTo(".change-status");

    }

    else if(!checkComplete) {

        var statusType="<p class=\"mark\">Mark as Complete</p>";
        $(statusType).appendTo(".change-status");

    }       

});

感谢您的帮助

Answer 1

我在这个 fiddle 中 fork 了你的代码:http://jsfiddle.net/Lar87/

这就是你想要的吗？

    $(document).on('click', function (e) {
        closeAllStatus();

        candidates = $(e.target).parents('.status');
        if (candidates.length > 0) {
            showDropdown(candidates[0]);
        }
    });

function closeAllStatus () {
        $(".change-status").fadeOut("normal", function() {
            $(this).remove();
        });
}

function showDropdown(element){
        var checkComplete=$(element).children().hasClass("complete");

        var changeStatus="<div class=\"change-status\"></div>";
        $(element).after(changeStatus);

        if(checkComplete) {

            var statusType="<p class=\"mark\">Mark as Incomplete</p>";
            $(statusType).appendTo(".change-status");

        }

        else if(!checkComplete) {

            var statusType="<p class=\"mark\">Mark as Complete</p>";
            $(statusType).appendTo(".change-status");

        }       

    }