Jquery 隐藏/显示奇怪的故障
使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
toggle_bar
上的href
应该有#
,否则您应该在click
处理程序中停止该事件。The
href
ontoggle_bar
should have#
or you should be stopping the event in theclick
handler.您在加载时隐藏而不是设置为在样式中不显示是否有原因?
OriginalSyn是对的,你可以这样写......
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...
我建议(如果您使用最新版本的 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.
这是一个有效的fiddle。您还应该使用
It was 自
1.7 起已弃用。
Heres a working fiddle. You should also be using
instead of
It was deprecated as of 1.7.
您似乎需要阻止链接传输到该 URL。以下是如何更改单击事件处理程序来执行此操作的示例。
http://jsfiddle.net/dp3T2/
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/