1

我刚进入这个项目，代码已经写好了，但是我们发现了一个问题。当您单击菜单中的任何位置时，它会将整个东西变成金色，您看不到菜单该部分中的任何链接。您可以再次单击它，它将恢复正常状态。这只发生在 Internet Explorer 9 和 Chrome 中，在 Firefox 中没有问题。底部的链接提供了一张图片，以便您查看问题。

我们在网站的移动版和 IE8 版本的 LI 上有一个 onclick，因此它们也有一个不错的下拉菜单。

当我删除 onclick 时，它会解决问题，但也会阻止移动和 IE8 用户的下拉菜单。

这是我认为与此问题有关的代码：HTML：

<li id="prospective" class="rightborder" onclick="javascript:showElement('prospective-links')">Future Students
<ul id="prospective-links">
<li><a href="/admissions">Undergraduate Admissions</a></li><li><a href="/morelinks">More  Links</a></li></ul>

JS

function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function()      {$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||     (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}

}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');

s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/
}
} 
else { function showElement(d){ var s=document.getElementById(d).style; 
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; } };

和CSS：

#prospective-links li,
#current-links li,
#academic-links li,
#facstaff-links li,
#parent-links li,
#alumni-links li,
#visitor-links li {
   width: 80%;}
prospective-links,
current-links,
academic-links,
facstaff-links,
parent-links,
alumni-links,
visitor-links {
display: none;
}

菜单问题

4

1 回答 1

0

我将用你提供的有限信息来试一试。

所以图片中“未来学生”下面的部分就是你所说的。你点击它，它就像图像一样“变成金色”。

实际上发生的事情是你点击它然后它就消失了。根据您调用的函数，这是正确的行为。它正在显示，所以现在它隐藏了它。顺便说一句，showElement这个函数的名字很糟糕，因为这不是它正在做的事情，但你继承了它，所以你可能无法控制它。类似的东西toggleElement会更好。

function showElement(d){ 
    var s=document.getElementById(d).style; 
    if (s.display != "block" ) { 
        s.display = "block"; 
    } else { 
        s.display = "none"; 
    } 
}

我的猜测是，在移动设备和 ie8 中，这些子菜单一开始是隐藏的，所以这个功能做了它应该做的事情，即在第一次点击时显示子菜单，然后在再次点击时隐藏它。尽管您在此处显示的功能表明宽度小于 949 像素的任何窗口都应该发生这种情况$(window).width() > 949

到目前为止，这是我能做的最好的事情。

于 2012-09-12T21:29:00.893 回答