jQueryの非表示/奇妙なグリッチに

Question

を表示これはjsfiddleと容易になるだろうが、神は私の証人であるようなものはjsfiddleと間違っていると私のJSのいずれも作業していないが、そうええのに、彼らは私のローカルホスト上で動作します。

だから、私はtopBarと呼ばれるdiv要素を持っている を説明しましょう。 そのDOM負荷に隠されました。私はtoggle_barをクリックする toggle_barと呼ばれるdiv要素を持っている、jqueryのはtoggle_barを隠し、topBar

を示すが持つ問題イムは、私はtoggle_barクリックした後、topBarが示されていることですが、私は私のマウスビットとBAMを動かします！ topBarはなくなっています。 toggle_barの場合：、hrefのようセットアップにイメージを使用してCSSをアイブ私はこれがここ

が起こっている理由を知らない は私のコード のjQuery

$("#topBar").hide(); 

$("#toggle_bar").live("click",function(){ 
    $("#toggle_bar").hide(); 
    $("#topBar").show(); 
}); 

HTML

<div class='toggle_bar'> 
     <a href='' id="toggle_bar" class="toggle_bar_class"></a> 
    </div> 
<div id="topBar" class="topBar" > 
    <div class="bar_frame"> 
     <div class="plogo"> 
      Page logo bla bla bla 
     </div> 
     <div class="controls"> 
      Notifications bla bla bla 
     </div> 
     <div class="nav_bar_frame"> 
     <div class="float_left_bar"> 
     </div> 
     <div class="float_right_bar"> 
     </div> 
</div> 
    </div> 
</div> 

PSです。 ：

Answer 1

toggle_barのhrefは#である必要があります。または、clickハンドラーでイベントを停止する必要があります。

Answer 2

あなたはむしろスタイルで何を表示しないように設定するよりも、負荷に隠れている理由はありますか？

OriginalSynは右である、あなたは

$("#toggle_bar").live("click",function() { 
    $(this).hide(); 
    $("#topBar").show(); 
    return false; 
}); 

Answer 3

...このようにそれを書くことができるHERESに取り組んfiddle。また、それがdeprecated as of 1.7.

Answer 4

た

.on 

代わりの

.live 

を使用する必要がありますが.onを使用するのjQueryの最新バージョンを使用している場合、私は（（推薦する）または.live（）メソッドの代わりに.delegate（）メソッドを使用してください。私はthis articleを参照します。これは違いを説明する素晴らしい仕事をします。

Answer 5

リンクがURLに移動しないようにする必要があります。ここでは、そうするためにあなたのクリックイベントハンドラを変更する方法の例です。

http://jsfiddle.net/dp3T2/

$("#toggle_bar").live("click",function (e){ 
    $("#toggle_bar").hide(); 
    $("#topBar").show(); 
    e.preventDefault(); 
});