Question

我刚进入这个项目，代码已经编写但我们发现了一个问题。当您单击菜单中的任何位置时，它会将整个事物变为金色，您无法在菜单的该部分中看到任何链接。您可以再次单击它，它将返回到正常状态。这只发生在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;
}

Menu problem

Answer 1

我打算用您提供的有限信息为此拍摄。

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

实际上发生的事情是你点击它并消失了。根据您调用的函数，这是正确的行为。它正在显示，所以它隐藏了它。顺便说一下，showElement对于这个函数来说是一个可怕的名字，因为它不是它正在做的事情，但你继承了它，所以你可能无法控制它。像toggleElement这样的东西会更好。

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

我的猜测是，在移动设备和ie8中，这些子菜单以隐藏方式开始，因此该功能可以实现预期，即在第一次点击时显示子菜单，然后再次点击时隐藏它。虽然您在此处显示的功能表明，对于任何宽度小于949px $(window).width() > 949

的窗口应该会发生这种情况

这是我迄今为止所做的最好的事情。

整个李的onclick风格 - 不想要

1 个答案: