Question

这里是我试图修复的图片，当我将鼠标悬停在弹出菜单显示在其他共享实例上的第一个共享图标时，我该如何阻止这个？

enter image description here

的完整代码库

var TNWSC = {
    init: function () {
        var t;
        var autohide = true;
        jQuery(
            '.tooltip-wrapper, #sharing-widget'
        )
            .hover(function () {
                clearTimeout(t);
                TNWSC.show_tooltip(
                    true);
                autohide = true;
            }, function () {
                if (autohide ===
                    true) {
                    t = setTimeout(
                        "TNWSC.show_tooltip(false)",
                        800);
                }
            });

        jQuery('#tooltip-close')
            .click(function () {
                clearTimeout(t);
                TNWSC.show_tooltip(
                    false);
                autohide = true;
            });

        jQuery(".popup-link")
            .click(function (e) {
                TNWSC.open_popup($(
                        this)
                    .attr("href"));
                e.preventDefault();
            });
    },

    show_tooltip: function (show) {
        if (show) {
            jQuery('.icon-share')
                .addClass('active');
            jQuery('.tooltip-wrapper')
                .show();
        } else {
            jQuery('.icon-share')
                .removeClass('active');
            jQuery('.tooltip-wrapper')
                .hide();
        }
    },

    open_popup: function (url) {

        var width = 640;
        var height = 420;
        var popupName = 'popup_' +
            width + 'x' + height;

        var left = (screen.width -
            width) / 2;
        var top = ((screen.height -
            height) / 2) + 25;
        var params = 'width=' + width +
            ',height=' + height +
            ',location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,left=' +
            left + ',top=' + top;

        window[popupName] = window.open(
            url, popupName, params);

        if (window.focus) {
            window[popupName].focus();
        }
    }

};

jQuery(document)
    .ready(function () {
        TNWSC.init();
    });

Answer 1

我建议您将对hovered元素的引用传递给show_tooltip函数。然后，选择您想要show()或addclass()的元素中的元素。

hover()
这样的内容
TNWSC.show_tooltip(true,jQuery(this));

然后对show_tooltip：
这样的话
show_tooltip: function(show,$obj) { if(show) { jQuery('.icon-share',$obj).addClass('active'); jQuery('.tooltip-wrapper',$obj).show(); } else { jQuery('.icon-share',$obj).removeClass('active'); jQuery('.tooltip-wrapper',$obj).hide(); } }

请在this jsFiddle中找到两个示例。第一个就像你的那个所有元素在你只悬停在一个之上时会打开和关闭。第二个示例使用jQuery(this)来引用鼠标悬停的对象。

如果您能够包含相关的HTML，我可以更加具体地了解您的代码。

编辑：

感谢jsFiddle。

以下是代码的修改部分。请注意，$hovered对象将传递给show_tooltip()，以便它知道哪个框处于活动状态。

关闭框的超时是根据活动元素的DOM索引设置的，并分别存储在数组中。这样，两个超时功能彼此独立。

var t=[]; var autohide = true; jQuery('.toolbar-social').hover(function () { var $hovered=jQuery(this); clearTimeout(t[$hovered.index()]); TNWSC.show_tooltip(true, $hovered); autohide = true; }, function () { if (autohide === true) { var $hovered=jQuery(this); t[$hovered.index()] = setTimeout(function() {TNWSC.show_tooltip(false,$hovered)}, 800); } });

我将#tooltip-close更改为某个类而不是ID，因为我们在页面上需要不止一个：

jQuery('.tooltip-close').click(function () { var $hovered=jQuery(this).closest('.toolbar-social'); clearTimeout(t[$hovered.index()]); TNWSC.show_tooltip(false,$hovered); autohide = true; });

这是show_tooltip()函数，再次使用$hovered对象修改活动框的子元素。

show_tooltip: function (show, $hovered) { if (show) { jQuery('.icon-share',$hovered).addClass('active'); jQuery('.tooltip-wrapper',$hovered).show(); } else { jQuery('.icon-share',$hovered).removeClass('active'); jQuery('.tooltip-wrapper',$hovered).hide(); } },

这是working example (jsfiddle)。

如何在弹出窗口上修复jquery

1 个答案:

编辑：