Jquery скрыть / показать странный глюк

Question

Это было бы проще с jsfiddle, но, поскольку Бог является моим свидетелем, что-то не так с jsfiddle, и ни один из моих js не работает, но они работают на моем локальном хосте, хотя да.

Итак, позвольте мне объяснить у меня есть div с именем topBar. Его спрятано на дом нагрузки. У меня есть div с именем toggle_bar При нажатии на toggle_bar jquery скрывает toggle_bar и показывает topBar

Но проблема, с которой я столкнулся, заключается в том, что после нажатия кнопки toggle_bar отображается topBar, но я немного двигаю мышью и BAM! topBar ушел. Я не знаю, почему это происходит

вот мой код 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: для toggle_bar: a, я использовал css, чтобы установить изображение как href. : D

Answer 1

href на toggle_bar должно иметь #, иначе вы должны остановить событие в обработчике click.

Answer 2

Я бы порекомендовал (если вы используете последнюю версию jQuery для использования метода .on () или .delegate () вместо метода .live (). Я бы рекомендовал вам this статья , которая отлично объясняет различия.

Answer 3

Есть ли причина, по которой вы прячетесь под нагрузкой, а не настраиваете отображение ни одного в стилях?

Правильно OriginalSyn, вы можете написать это так ...

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

Answer 4

Похоже, вам нужно запретить переход ссылки на URL. Вот пример того, как изменить ваш обработчик события click для этого.

http://jsfiddle.net/dp3T2/

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

1007 *

Answer 5

Вот рабочая скрипка . Вы также должны использовать

.on

вместо

.live

Это было устарело на 1.7.