Jquery 隐藏/显示奇怪的故障

发布于 2025-01-08 08:09:36 字数 1130 浏览 0 评论 0原文

使用 jsfiddle 会更容易,但上帝是我的见证,jsfiddle 出了问题,我的 js 都不起作用,但它们在我的本地主机上工作,所以是的。

那么让我解释一下 我有一个名为 topBar 的 div。 它隐藏在 dom 加载中。我有一个名为toggle_bar的div 当单击toggle_bar时,jquery隐藏toggle_bar并显示topBar

但我遇到的问题是,在我单击toggle_bar后,显示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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

幽蝶幻影 2025-01-15 08:09:36

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

The href on toggle_bar should have # or you should be stopping the event in the click handler.

梨涡 2025-01-15 08:09:36

您在加载时隐藏而不是设置为在样式中不显示是否有原因?

OriginalSyn是对的,你可以这样写......

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

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;
});
盗琴音 2025-01-15 08:09:36

我建议(如果您使用最新版本的 jQuery)使用 .on() 或 .delegate() 方法代替 .live() 方法。我建议您参考 这篇文章很好地解释了这些差异。

I would recommend (if you're using the latest version of jQuery to use the .on() or .delegate() method in in lieu of the .live() method. I would refer you to this article which does a great job of explaining the differences.

私野 2025-01-15 08:09:36

这是一个有效的fiddle。您还应该使用

.on

It was

.live

1.7 起已弃用。

Heres a working fiddle. You should also be using

.on

instead of

.live

It was deprecated as of 1.7.

尤怨 2025-01-15 08:09:36

您似乎需要阻止链接传输到该 URL。以下是如何更改单击事件处理程序来执行此操作的示例。

http://jsfiddle.net/dp3T2/

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文