用ColdFusion编写,我有一个自定义编写的菜单,单击该菜单可以上下滚动或向上滚动。当我将CSS与样式声明内联时,一切正常。当我用已定义的类替换样式语句时,该下拉列表将不起作用。
班级导航是:
.navct {
display:none;
margin-left:5%;
overflow:visible;
white-space:nowrap
}
第一个下拉菜单“ people”使用类navct而不下拉菜单。第二个“事件”使用嵌入式样式,效果很好。这是相关的ColdFusion代码。 。
<table border = "2" class = "navbar" >
<tr>
<td>
<ul class= "navul" style = "padding-right: 10px">
<li style = "color: ##800517; cursor:pointer" onclick = toggnav('ctpeople','#controllist#')"> People </li>
<div id = 'ctpeople' class = "navct" >
<ul class = 'navul'>
<li><a href = "xref1.cfm?basetab=PersType">Person Types</a><li>
<li><a href = "xref1.cfm?basetab=Source">Person Sources</a></li>
</ul>
</div>
<li style = "color: ##800517; cursor:pointer" onclick = "toggnav('ctevent','#controllist#')">Events</li>
<div id = 'ctevent' style = "display:none;
margin-left:5%;
overflow:visible;
white-space:nowrap">
<ul class = 'navul'>
<li> <a href = "xref1.cfm?basetab=EventType"> Event Types </a></li>
<li> <a href = "xref1.cfm?basetab=Subevent"> Subevents </a> </li>
<li> <a href = "xref1.cfm?basetab=Period">Time Periods </a> </li>
<li> <a href = "xref1.cfm?basetab=Activity"> Activities </a></li>
<li> <a href = "xref1.cfm?basetab=ActStatus">Activity Status</a> </li>
</ul>
</div>
etc.....
javascript toggnav()是
function toggnav(id, navlist) {
var navarr = navlist.split(",");
navarr.forEach(toggtest);
function toggtest(item){
var auxbutton = document.getElementById(item);
if (item == id) {
if(auxbutton.style.display == 'none'){
auxbutton.style.display = '';}
else if(auxbutton.style.display != 'none'){
auxbutton.style.display = 'none';}
}
if (item != id) {
auxbutton.style.display = 'none'; }
}//end of toggtest
}//end of toggnav
在跟踪功能toggnav时,我发现类别为“ navct”的项被表示为显示(即navct中的显示均不起作用),因此将其设置为none。添加内联显示样式:没有一个不能解决此问题。
第二项的结果:
使用样式和使用类似乎有些不明白的地方。谁能解释为什么使用该类无效。更好的是,由于样式使代码混乱,您可以建议如何使其工作。