Jquery 隐藏/显示在 Firefox/Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/972056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery hide/show not working in Firefox/Chrome
提问by Tim
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.
我有一些 HTML/JQuery 代码似乎只适用于 IE 8。我试图通过添加一些直接的 html 代码将 meebo 聊天小部件嵌入到 wiki 中。我不希望小部件默认加载，因为它需要一些时间，所以我将它放在一个 div 中并使用 Jquery 隐藏它。
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.
不幸的是，这似乎只适用于 Internet Explorer。在 Firefox 3 中，当我单击切换按钮时，没有任何反应。当我在谷歌浏览器中尝试时，显示/隐藏文本会切换，但嵌入小部件不显示。
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?
有谁知道这是使用 JQuery 的问题，还是浏览器兼容性问题？有很多后端 wiki 代码也可能影响该问题。例如，我嵌入小部件的位置嵌套在表和其他 div 中。这会导致 JQuery 选择器出现问题吗？
Any help would be appreciated.
任何帮助，将不胜感激。
Jquery Code:
查询代码：
$(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;
});
});
My HTML:
我的 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>
EDIT: 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.
编辑：无论 div 中有什么，似乎都会发生此问题。我简化了示例以包含文本，因为我相信它稍微简化了代码。
回答by Tim
I figured out what the problem was. The issue was that the wiki backend was already including a different (and older) version of JQuery.
我想出了问题所在。问题是 wiki 后端已经包含不同（和旧）版本的 JQuery。
To fix this, I needed to use the core JQuery function noConflict().
为了解决这个问题，我需要使用核心 JQuery 函数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>
This fixed all the issues of conflicting JQuery libraries.
这解决了 JQuery 库冲突的所有问题。
回答by Ali
you js is fine mate i think. there is something wrong with your markup.
你 js 很好，我认为。你的标记有问题。
you have got an object tag and then inside it a param which is fine but its being closed with an embed.
你有一个对象标签，然后在它里面有一个很好的参数，但它被嵌入关闭。
Object tag for ie Embed for ff
ie 嵌入 ff 的对象标签
hope this helps
希望这可以帮助
