使用类而不是内联样式的Coldfusion会破坏代码

时间:2020-04-23 22:51:02

标签: css coldfusion styles

用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。添加内联显示样式:没有一个不能解决此问题。

第二项的结果:

enter image description here

使用样式和使用类似乎有些不明白的地方。谁能解释为什么使用该类无效。更好的是,由于样式使代码混乱,您可以建议如何使其工作。

0 个答案:

没有答案
相关问题