jQuery的隐藏/显示奇怪的故障

Question

This would be easier with a jsfiddle, but as god is my witness something is wrong with jsfiddle and none of my js is working, but they work on my localhost though so yeah.

So let me explain i have a div called topBar. Its hidden on dom load. I have a div called toggle_bar When toggle_bar is clicked, jquery hides toggle_bar and shows topBar

But the problem im having is that after i click toggle_bar, topBar is shown but i move my mouse a bit and BAM! topBar is gone. I dont know why this is happening

here is my code 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: For the toggle_bar:a , ive used css to setup an image as href. :D

Answer 1

toggle_bar上的href应该包含#否则您应该在click处理程序中停止该事件。

Answer 2

Is there a reason why you are hiding on load rather than setting to display none in the styles?

OriginalSyn is right, you could write it like this...

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

Answer 3

我建议（如果您使用的是最新版本的jQuery来代替.live（）方法，则使用.on（）或.delegate（）方法。我将向您推荐这篇非常出色的文章）解释差异。

Answer 4

Heres a working fiddle . You should also be using

.on

instead of

.live

It was deprecated as of 1.7.

Answer 5

It seems like you need to prevent the link from traveling to the URL. Here is an example of how to change your click event handler to do so.

http://jsfiddle.net/dp3T2/

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

​