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

と他人のカップルが、nudda ...

これは私ですマークアップ...

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

と私のVAR

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

私が間違っているつもりです任意のアイデア？大いに助けになるでしょうか？

---

$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

私は$ .clickを（とは思いません）パラメータとして2つの関数を取ります。 2番目の機能を使いこなそうとしましたか？あなたが2つの間でトグルしようとしているなら、if-elseを使って何かを書く必要があります。

EDIT：ああ、または.toggle（）を使用します。

Answer 2

@hurshagrawalおかげで、私はあなたが.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 3

bind（）を試してみると、ブラウザ間で信頼性が高いことがわかりました。あなたのケースで

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

基本的な使い方は、（未テスト）のようになります。

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