javascript - onclick 样式整个 li - 不想

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

我将根据您提供的有限信息试一试。

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

实际上发生的事情是你点击它然后它就消失了。根据您调用的函数，这是正确的行为。它正在显示，所以现在它隐藏了它。顺便说一句，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

这是我目前所能做的最好的事情。