6

我有这个使用点击函数编写的 jQuery 代码。

代码必须使用 jQuery 1.7.2。

我在这里设置了一个 jsfiddle：http: //jsfiddle.net/7MpTa/1/

$(document).ready(
function () {
    $(".balloons a").hover(
        function() {
            $(this).next('.popups').addClass("shown");
        },
        function() {
            $(this).next('.popups').removeClass("shown");
        }
    );
}

);

当我将点击功能切换为悬停时，它可以工作。只是单击功能本身不起作用。我尝试将其更改为绑定和生活，但没有成功。

这是悬停工作的演示：http: //jsfiddle.net/8HL8k/1/

有人知道为什么它不起作用吗？

编辑 感谢大家的回答。他们显然都工作得很好。但是，在网站上实施这些更改时，根本不会触发事件（在 FF、IE7+、Chrome、Opera、Safari 上测试）。类（气球和弹出窗口）绝对没有其他参考，所以我不确定是什么导致了干扰。由于严格的 NDA 政策，我无法发布该网站的链接。它们都在无序列表（ul）中。可能是由这种 HTML 语法引起的吗？如果是这样，有没有办法解决它？因为它必须保留在代码中，因为代码被用于整个站点的数百个幻灯片。

我还尝试让锚点在点击时发出警报，看看它是否会触发它，但它也没有触发它。

编写的脚本应该在头部内的 jQuery 1.7.2 引用之前或之后调用，还是在文档的完整底部、标记之前调用？

4

3 回答 3

6

您可以使用toggle()而不是click()：

$(".balloons a").toggle(
    function() {
        $(this).next('.popups').addClass("shown");
    },
    function() {
        $(this).next('.popups').removeClass("shown");
    }
);

正如你在这里看到的：http: //jsfiddle.net/darkajax/tmzt7/

但是请记住toggle()，自 jQuery 1.8 起已弃用，并已在 1.9 中删除，但由于您使用的是 1.7.2，所以无论如何它应该可以工作......

但是，更好的解决方案是使用toggleClass()：

$(".balloons a").click(
    function() {
        $(this).next('.popups').toggleClass("shown");
    }
);

正如你在这里看到的：http: //jsfiddle.net/darkajax/GeSmx/

编辑：回答你的第二个问题/问题的一部分，jQuery 参考应该在所有使用它的方法/函数之前......

于 2013-03-13T15:49:58.883 回答
3

Hover 有一个 on 和一个 out 功能，而 click 只需要一个功能。

$(document).ready(function () {
    $(".balloons a").click(function() {
         $(this).next('.popups').toggleClass("shown");
    });
});

toggleClass将采取步骤添加和删除类。

于 2013-03-13T15:52:19.713 回答
1

toggle()不使用click

工作演示

于 2013-03-13T15:51:45.230 回答