Question

我在jsfiddle中测试了一些布局编码，然后在我正在处理的网站上实现它。不确定这是否是一个特定问题，但三角形上的点击事件似乎不起作用。

    var $MenuTriangle = $(".menu.triangle");
    $MenuTriangle.click(function () {
    alert("click handler called");
    if ($(this).css("transform") == 'none') {
        $(this).css("transform", "rotate(90deg) translate(1px,1.5px)");
        $(this).css("-webkit-transform", "rotate(90deg) translate(1px,1.5px)");
        $(this).css("-moz-transform", "rotate(90deg) translate(1px,1.5px)");
        $(this).css("-ms-transform", "rotate(90deg) translate(1px,1.5px)");
        $(this).css("-o-transform", "rotate(90deg) translate(1px,1.5px)");
    } else {
        $(this).css("transform", "");
        $(this).css("-webkit-transform", "");
        $(this).css("-moz-transform", "");
        $(this).css("-ms-transform", "");
        $(this).css("-o-transform", "");
    });

这看起来很典型，所以我不确定问题是什么。我很确定jsfiddle会为你添加$（document）.ready（....），但在任何一种情况下，当我自己添加代码时，代码甚至都不起作用，所以我不认为这是问题

有人能发现我失踪的东西吗？谢谢！

Answer 1

您错过了应该在代码的倒数第二行的结束} - 换句话说，您忘记关闭else {...条件。现在修复：http://jsfiddle.net/teddyrised/0qaam2vh/8/

此外，jQuery会自动添加供应商前缀，因此您可以将代码实际简化为以下内容：

var $MenuTriangle = $(".menu.triangle");
$MenuTriangle.click(function () {
    alert("click handler called");
    if ($(this).css("transform") == 'none') {
        $(this).css("transform", "rotate(90deg) translate(1px,1.5px)");
    } else {
        $(this).css("transform", "");
    }
});

事实上，我建议切换一个类而不是使用.css()函数;）

Answer 2

检查javascript控制台（取决于您的操作系统/设备，通常是F12或“开发者工具”或浏览器中的类似工具）：您在click处理函数定义的末尾缺少大括号。

修正小提琴：http://jsfiddle.net/vtLkzwg7/

var $MenuTriangle = $(".menu.triangle");
$MenuTriangle.click(function () {
alert("click handler called");
if ($(this).css("transform") == 'none') {
    $(this).css("transform", "rotate(90deg) translate(1px,1.5px)");
    $(this).css("-webkit-transform", "rotate(90deg) translate(1px,1.5px)");
    $(this).css("-moz-transform", "rotate(90deg) translate(1px,1.5px)");
    $(this).css("-ms-transform", "rotate(90deg) translate(1px,1.5px)");
    $(this).css("-o-transform", "rotate(90deg) translate(1px,1.5px)");
} else {
    $(this).css("transform", "");
    $(this).css("-webkit-transform", "");
    $(this).css("-moz-transform", "");
    $(this).css("-ms-transform", "");
    $(this).css("-o-transform", "");
}}); // <== fixed this line

jQuery点击事件不起作用？

2 个答案: