点击，点击不工作?jquery

onclick, click not working? jquery

本文关键字：工作 jquery 点击      更新时间：2023-09-26

我只是想改变一个悬停触发点击，但由于某种原因，我使用的任何点击功能不工作?

这是我当前的代码，当你悬停…

当前脚本工作在悬停… 

    $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);
    });

但是看看我下面的尝试让它在点击时工作，但奇怪的是什么也没有发生。

My Attempt One

    $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>

和我的变量

$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');
    }
});

我想你是在找。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);
});

我不认为$.click()需要2个函数作为参数。你试过把第二个函数提出来吗?如果你试图在这两者之间切换，你可能需要写一些带有If -else语句的东西。

编辑:啊，或者使用。toggle()。

尝试使用bind()，我发现跨浏览器更可靠。

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

在您的情况下的基本用法是(未经测试):

$showSidebar.bind('click', function() {
  // do stuff
});
相关文章：