Question

我只是想将悬停触发器更改为单击但由于某种原因我使用的任何单击功能都不起作用？

这是我当前的代码，当您将鼠标悬停时...

当前脚本可以悬停...

    $showSidebar.hover(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

但是请看下面我的尝试，点击时让它工作，但很奇怪没有任何反应。

我的尝试一次

    $showSidebar.click(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

和

我的尝试二

    $showSidebar.on('click', function () {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

和其他几个人，但是nudda ...

这是我的标记......

<a href="#" title="More" class="button blu large" id="show-sidebar"><span>//</span> MORE</a>

和我的var

$showSidebar  = $("#show-sidebar");

我出错的任何想法？非常有帮助，谢谢！

查看工作代码，感谢@hurshagrawal

$showSidebar.on('click', function () {
    if ($showSidebar.html() == '<span>//</span> CLOSE') {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    } else {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
        $showSidebar.html('<span>//</span> CLOSE');
    }
});

Answer 1

我认为您正在寻找.toggle()命令：

$showSidebar.toggle(function() {
    $wrapper.stop().animate({ left: "-178px" }, 300);
    $sidebarSlider.stop().animate({ width: "452px" }, 300);
    $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
}, function() {
    $wrapper.stop().animate({ left: "0" }, 300);
    $sidebarSlider.stop().animate({ width: "274px" }, 300);
    $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});

Answer 2

我认为$ .click（）不会将2个函数作为参数。你尝试过第二个功能吗？如果你试图在两者之间切换，你可能不得不在那里写一些if-else。

编辑：啊，或者使用.toggle（）。

Answer 3

尝试使用bind（），我发现浏览器更可靠。

http://api.jquery.com/bind/

您案例中的基本用法是（未经测试）：

$showSidebar.bind('click', function() {
  // do stuff
});

onclick，点击不工作？ jQuery的

3 个答案: