на клик, клик не работает? 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>

и мой вар

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