我对JQuery有点“新手”,我一直在研究一个拥有众多网站的大品牌。所以我想到了所有这些网站的JQuery Toggle菜单。
我有一个名为menu.html的菜单文件,上面有Toggle,CSS和HTML,我用这段代码将它添加到所有页面中:
<script type="text/javascript">
$(document).ready(function() {
$("#menuTop").load("/menu/menu.html");
});
主要问题是JQuery在FF和Chrome以及IE9的某些页面上工作得非常好。但它在某些页面上无法正常工作,我不知道为什么。
例如:
www.coldwell-fiscal.com.br适用于所有浏览器,但www.coldwell.com.br以奇怪的方式工作,菜单根本无法切换或切换。
我尝试检查页面之间的代码,在切换上添加了一些no.conflict,因此它将与另一个libs和插件堆叠。
以下是切换的代码:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("li#showColdwell").click(
function() {
if ($j("ul.single").css("display")=="none") {
$j("ul.single").slideDown();
$j("li#showColdwell").addClass("slide");
$j(".toggleColdwell").addClass("toggleHover");
}
else {
$j("ul.single").slideUp();
$j("li#showColdwell").removeClass("slide");
$j(".toggleColdwell").removeClass("toggleHover");
}
}
);
$j("li#showColdwell").click(
function() {
$j("ul.empresas, ul.aplicativos, ul.serv, ul.tecnologia, ul.mais").slideUp();
$j("li#showEmpresas, li#showApp, li#showServ, li#showTec, li#showMais").removeClass("slide");
$j(".toggleEmpresas, .toggleAplicativos, .toggleServicos, .toggleTecnologia, .toggleMais").removeClass("toggleHover");
}
);
$j("li#showEmpresas").click(
function() {
if ($j("ul.empresas").css("display")=="none") {
$j("ul.empresas").slideDown();
$j("li#showEmpresas").addClass("slide");
$j(".toggleEmpresas").addClass("toggleHover");
}
else {
$j("ul.empresas").slideUp();
$j("li#showEmpresas").removeClass("slide");
$j(".toggleEmpresas").removeClass("toggleHover");
}
}
);
$j("li#showEmpresas").click(
function() {
$j("ul.single, ul.aplicativos, ul.serv, ul.tecnologia, ul.mais").slideUp();
$j("li#showColdwell, li#showApp, li#showServ, li#showTec, li#showMais").removeClass("slide");
$j(".toggleColdwell, .toggleAplicativos, .toggleServicos, .toggleTecnologia, .toggleMais").removeClass("toggleHover");
}
);
$j("li#showApp").click(
function() {
if ($j("ul.aplicativos").css("display")=="none") {
$j("ul.aplicativos").slideDown();
$j("li#showApp").addClass("slide");
$j(".toggleAplicativos").addClass("toggleHover");
}
else {
$j("ul.aplicativos").slideUp();
$j("li#showApp").removeClass("slide");
$j(".toggleAplicativos").removeClass("toggleHover");
}
}
);
$j("li#showApp").click(
function() {
$j("ul.single, ul.empresas, ul.serv, ul.tecnologia, ul.mais").slideUp();
$j("li#showColdwell, li#showEmpresas, li#showServ, li#showTec, li#showMais").removeClass("slide");
$j(".toggleEmpresas, .toggleColdwell, .toggleServicos, .toggleTecnologia, .toggleMais").removeClass("toggleHover");
}
);
$j("li#showServ").click(
function() {
if ($j("ul.serv").css("display")=="none") {
$j("ul.serv").slideDown();
$j("li#showServ").addClass("slide");
$j(".toggleServicos").addClass("toggleHover");
}
else {
$j("ul.serv").slideUp();
$j("li#showServ").removeClass("slide");
$j(".toggleServicos").removeClass("toggleHover");
}
}
);
$j("li#showServ").click(
function() {
$j("ul.single, ul.aplicativos, ul.empresas, ul.tecnologia, ul.mais").slideUp();
$j("li#showColdwell, li#showEmpresas, li#showApp, li#showTec, li#showMais").removeClass("slide");
$j(".toggleEmpresas, .toggleAplicativos, .toggleColdwell, .toggleTecnologia, .toggleMais").removeClass("toggleHover");
}
);
$j("li#showTec").click(
function() {
if ($j("ul.tecnologia").css("display")=="none") {
$j("ul.tecnologia").slideDown();
$j("li#showTec").addClass("slide");
$j(".toggleTecnologia").addClass("toggleHover");
}
else {
$j("ul.tecnologia").slideUp();
$j("li#showTec").removeClass("slide");
$j(".toggleTecnologia").removeClass("toggleHover");
}
}
);
$j("li#showTec").click(
function() {
$j("ul.single, ul.aplicativos, ul.serv, ul.empresas, ul.mais").slideUp();
$j("li#showColdwell, li#showEmpresas, li#showServ, li#showApp, li#showMais").removeClass("slide");
$j(".toggleEmpresas, .toggleAplicativos, .toggleColdwell, .toggleServicos, .toggleMais").removeClass("toggleHover");
}
);
$j("li#showMais").click(
function() {
if ($j("ul.mais").css("display")=="none") {
$j("ul.mais").slideDown();
$j("li#showMais").addClass("slide");
$j(".toggleMais").addClass("toggleHover");
}
else {
$j("ul.mais").slideUp();
$j("li#showMais").removeClass("slide");
$j(".toggleMais").removeClass("toggleHover");
}
}
);
$j("li#showMais").click(
function() {
$j("ul.single, ul.aplicativos, ul.serv, ul.empresas, ul.tecnologia").slideUp();
$j("li#showColdwell, li#showEmpresas, li#showServ, li#showApp, li#showTec").removeClass("slide");
$j(".toggleEmpresas, .toggleAplicativos, .toggleColdwell, .toggleServicos, .toggleTecnologia").removeClass("toggleHover");
}
);
});
答案 0 :(得分:0)
如果用这个替换所有内容怎么办:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var mySlide = $j("ul.single, ul.empresas, ul.aplicativos, ul.serv, ul.tecnologia, ul.mais");
var mySlideClass = $j("li#showColdwell, li#showEmpresas, li#showApp, li#showServ, li#showTec, li#showMais");
var myToggleClass = $j(".toggleColdwell, .toggleEmpresas, .toggleAplicativos, .toggleServicos, .toggleTecnologia, .toggleMais");
function actions(ck, tg, t) {
if (ck.css("display") == "none") {
ck.slideDown();
t.addClass("slide");
tg.addClass("toggleHover");
} else {
ck.slideUp();
t.removeClass("slide");
tg.removeClass("toggleHover");
}
mySlide.not(ck).slideUp();
mySlideClass.not(t).removeClass("slide");
myToggleClass.not(tg).removeClass("toggleHover");
}
$j("li#showColdwell").click(function() {
var ck = $j("ul.single");
var tg = $j(".toggleColdwell");
var t = $(this);
actions(ck, tg, t);
});
$j("li#showMais").click(function() {
var ck = $j("ul.mais");
var tg = $j(".toggleMais");
var t = $(this);
actions(ck, tg, t);
});
$j("li#showEmpresas").click(function() {
var ck = $j("ul.empresas");
var tg = $j(".toggleEmpresas");
var t = $(this);
actions(ck, tg, t);
});
$j("li#showApp").click(function() {
var ck = $j("ul.aplicativos");
var tg = $j(".toggleAplicativos");
var t = $(this);
actions(ck, tg, t);
});
$j("li#showServ").click(function() {
var ck = $j("ul.serv");
var tg = $j(".toggleServicos");
var t = $(this);
actions(ck, tg, t);
});
$j("li#showTec").click(function() {
var ck = $j("ul.tecnologia");
var tg = $j(".toggleTecnologia");
var t = $(this);
actions(ck, tg, t);
});
});