Javascript 模糊正在取消单击事件

模糊事件似乎正在取消单击事件

    toggleContent : function () {

        var wrapper = $('.wrapper'),
            targetClass = '.moreInfo',
            eContent = wrapper.find('.more');

        wrapper.on('click', targetClass, function (e) {

            e.preventDefault();

            if ($(this).hasClass('selected')) {

                return false;
            }
            else {

                eContent = $(this).focus().parent().next();
                eContent.slideDown('normal');
                $(this).addClass('selected');
            }

        }).on('blur', targetClass, function (e) {

            eContent = $(this).parent().next();

            if ($(this).hasClass('selected')){
                eContent.slideUp('normal');
                $(this).removeClass('selected');
            }

        });
    }

当用户单击图像时，面板应滑入视图

当面板可见时，单击面板外部的任何位置都应将面板向上滑出视图

问题是，当我有多个这样的模块时，当第一个面板打开时，我单击第二个图像时，模糊功能会启动，但不会单击事件

    toggleContent : function () {

        var wrapper = $('.wrapper'),
            targetClass = '.moreInfo',
            eContent = wrapper.find('.more');

        wrapper.on('click', targetClass, function (e) {

            e.preventDefault();

            if ($(this).hasClass('selected')) {

                return false;
            }
            else {

                eContent = $(this).focus().parent().next();
                eContent.slideDown('normal');
                $(this).addClass('selected');
            }

        }).on('blur', targetClass, function (e) {

            eContent = $(this).parent().next();

            if ($(this).hasClass('selected')){
                eContent.slideUp('normal');
                $(this).removeClass('selected');
            }

        });
    }

---

我猜这些只是常规元素，而不是表单输入等。所以使用焦点和模糊没有多大意义，即使有黑客通过tabindex等将焦点设置为任何东西。这似乎不是一个好的事件。你能提供一个示例代码或JSFIDLE吗？