javascript - 为什么内部拨动开关无法正常工作

我有一个拨动开关，但不能正常工作。切换仅在div具有“单击”类时才需要显示（也可以切换），但有时您仍然可以单击..而且在单击时也并不总是有效...我想我要去这完全是错误的：S这是到目前为止我的代码，弄不明白我的意思-fiddle

$(document).ready(function () {
    $('.timelineTile').click(function (evt) {
        evt.stopPropagation();
        $('.selected').children().not(this).removeClass('clicked');
        $(this).toggleClass('clicked');
        if ($('.selected').children().hasClass("clicked")) {
            $('.details').addClass('show');
        }
        if ($('.selected').children().hasClass("clicked")) {
            $(this).children('.item').click(function (e) {
                e.stopPropagation();
                $(this).siblings('.item-overlay').slideToggle('fast');
            });
        }
        if ($('.selected').children().not("clicked")) {
            $('.item-overlay').hide('fast');
        }
    });
});

$(document).click(function () {
    $('.timelineTile').removeClass('clicked');
    $('.details').removeClass('show');

    $('.item-overlay').hide('fast');
});

最佳答案

我不是100％知道该示例的用途，但是您正在将点击处理程序连接到点击处理程序中。我已将其移到外部，并在新的委派点击处理程序中测试了.selected祖先中是否有被点击的孩子：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/xmgb85p5/4/

$(document).ready(function () {
    // Click a tile
    $('.timelineTile').click(function (evt) {
        console.log(".timelineTile click");

        // Stop the click propogating
        evt.stopPropagation();

        // Remove clicked class from all other tiles and hide other overlays
        $('.timelineTile').not(this).removeClass('clicked').find('.item-overlay').hide("fast");

        // Toggle the current tile clicked class
        $(this).toggleClass('clicked');

        // If we are clicked, show details
        if ($(this).hasClass("clicked")) {
            $('.details', this).addClass('show');
        }
    }).on('click', '.item', function (e) {
        console.log(".item click");
        if ($(this).closest('.timelineTile').hasClass("clicked")) {
            e.stopPropagation();
            $(this).siblings('.item-overlay').slideToggle('fast');
        }
    });
});

$(document).click(function () {
    $('.timelineTile').removeClass('clicked');
    $('.details').removeClass('show');

    $('.item-overlay').hide('fast');
});

如果仍然不正确，请说明预期的行为。