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屋！