onclick，單擊不起作用？ jQuery的

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

和其他幾個人，但努達...

這是我的標記...

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