javascript - 为什么内部切换不能正常工作

Question

我在一个切换中有一个切换，但它不能正常工作。只有当 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');
});

Answer 1

我不是 100% 确定该示例的用途，但您在点击处理程序中连接了一个点击处理程序。我已将它移到外面并在新的委托(delegate)点击处理程序中测试点击子项的 .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');
});

如果这仍然不正确，请澄清预期的行为。