jQuery隐藏/显示在Firefox/Chrome中不起作用 [英] Jquery hide/show not working in Firefox/Chrome
问题描述
我有一些HTML/JQuery代码似乎只适用于IE8.我试图通过添加一些直接html代码将meebo聊天小部件嵌入Wiki.我不希望该窗口小部件默认加载,因为它会花费一些时间,所以我将其放入div并使用Jquery隐藏它.
I have a bit of HTML/JQuery code that only seems to be working for IE 8. I am attempting to embed a meebo chat widget into a wiki by adding some direct html code. I don't want the widget to load by default, as it takes a bit of time, so I am putting it in a div and hiding it using Jquery.
不幸的是,这似乎仅在Internet Explorer中有效.在Firefox 3中,当我单击切换按钮时,没有任何反应.当我在Google Chrome浏览器中尝试时,显示/隐藏文本会切换,但嵌入窗口小部件不会显示.
Unfortunately, this only seems to work in Internet Explorer. In Firefox 3, when I click on the toggle button, nothing happens. When I tried in Google Chrome, the show/hide text would toggle, but the embedding widget doesn't show up.
有人知道这是使用JQuery的问题还是浏览器兼容性问题?还有很多后端Wiki代码也可能会影响该问题.例如,我在其中嵌入窗口小部件的位置嵌套在表和其他div中.这会导致JQuery选择器出现问题吗?
Does anyone know if this is an issue using JQuery, or perhaps a browser compatibility issue? There is a lot of backend wiki code that could be affecting the issue as well. For instance, the place where I embed the widget is nested in both tables and other divs. Could this be causing problems with the JQuery selectors?
任何帮助将不胜感激.
$(document).ready(function(){
$(".btn-slide").click(function(e){
e.preventDefault();
$("#meebo-panel").toggleClass("meebo-open").toggleClass("meebo-closed").toggleClass("meebo-hide").toggleClass("meebo-show");
$(".btn-slide").toggleClass("show-text").toggleClass("hide-text");
$(".show-hide-panel").toggleClass("green-panel").toggleClass("grey-panel");
$(".meebo-show").show();
$(".meebo-hide").hide();
$(".show-text").text("Chat with me");
$(".hide-text").text("Hide");
return false;
});
});
我的HTML:
<div class="show-hide-panel green-panel"><a href="#" class="btn-slide show-text">Chat now</a></div>
<div id="meebo-panel" class="meebo-closed meebo-hide">
Test
</div>
看来无论div中有什么,都会出现此问题.我简化了该示例,改为包含文本,因为我认为该示例可以使代码稍微精简.
It appears that this issue occurs regardless of what is in the div. I simplified the example to include text instead, since I believe it streamlines the code a bit.
推荐答案
我弄清楚了问题所在.问题在于Wiki后端已经包含了一个不同(和较旧)的JQuery版本.
I figured out what the problem was. The issue was that the wiki backend was already including a different (and older) version of JQuery.
要解决此问题,我需要使用核心JQuery函数 noConflict ().
To fix this, I needed to use the core JQuery function noConflict().
我的代码最终看起来像:
My code ended up looking like:
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
//Do jQuery stuff using $
...
...
});
</script>
这解决了所有冲突的JQuery库的问题.
This fixed all the issues of conflicting JQuery libraries.
这篇关于jQuery隐藏/显示在Firefox/Chrome中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!