从查询生成的菜单项的交替背景颜色

Question

我正在对动态生成的 jquery 菜单进行最后的润色。该菜单包含根据员工登录分配给员工的报告。有些员工的菜单只有两个项目，而其他员工的列表可能有 20 份报告。

我已经看到一些帖子如何根据具有固定数量项目的列表实施 CSS3。我的问题是，如果没有两名员工在他们的菜单中有相同数量的项目，我怎么能用这个菜单做同样的事情？下面是菜单的当前代码。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!---<link rel="stylesheet" href="/resources/demos/style.css" />--->
<script>
$(function() {
$("#menu" ).menu();
});


$(function() {
$(document ).tooltip();

});

function Refresh() {
child.location.reload(true);
}
</script>
<style>
    a{
        font-family:Arial;          
    }

#MainMenu
{
    background-color:"#58B0EB";
}
.ui-menu { width: 270px;
            font: Arial;
            font-size: small;                       
            }

 .ui-tooltip {
    background-image: none;
    background-color: #f7f792; 
    display: inline-block;
    font: Verdana;
    font-size:x-small;  
  }

</style>
</head>
<body>

<cfset User_Id=session.ft_user_id>  
<cfinvoke component="cfc.MainMenu" method="GetMenuHead" returnvariable="GetMenuHeadRet"> 
    <cfinvokeargument name="User_Id" value="#User_Id#"/>
</cfinvoke>

<ul id="menu">
    <li>            
        <a id="MainMenu" href="#">Reports and tools</a>
        <ul>
        <cfloop query="GetMenuHeadRet">
            <cfif GetMenuHeadRet.recordcount gt 0>
            <li style="background-color:#E6E6E6;">
                <cfoutput><a href="##">#Description#</a></cfoutput>
                <cfinvoke component="cfc.MainMenu"  method="GetMenuItem" returnvariable="GetMenuItemRet">
                    <cfinvokeargument name="menukey" value="#ID#"/>
                    <cfinvokeargument name="User_Id" value="#User_Id#"/>
                </cfinvoke>

                <ul>
                    <cfif GetMenuItemRet.recordcount gt 0>
                        <cfloop query="GetMenuItemRet">                                                 
                                <cfoutput><li><a title="#report_Desc#" onClick="Refresh();" href="#URL#?uid="#User_Id# target="_blank">#Report_Name#</a></li></cfoutput>
                        </cfloop>
                    </cfif>
                </ul>
            </li>
            </cfif>
        </cfloop>
      </ul>
    </li>
</ul>
</body>
</html>

Answer 1

你可以使用

.even{
  background-color:red;
}
.odd{
  background-color:blue;
}

<cfloop query="GetMenuItemRet">                                                 
  <cfoutput>
    <li <cfif GetMenuItemRet.currentRow % 2 eq 0>class="even"<cfelse>class="odd"</cfif>>
       <a title="#report_Desc#" onClick="Refresh();" href="#URL#?uid="#User_Id# target="_blank">#Report_Name#</a>
    </li>
  </cfoutput>
</cfloop>

Answer 2

你可以使用简单的CSS3；只需使用类似于这些的两条规则：

ul li:nth-child(2n) {
    background-color: #AA5555;
}

ul li:nth-child(2n+1) {
    background-color: #5555AA;
}

这是一个（丑陋的:P）示例：http://jsfiddle.net/ryebmym7/1/

从查询生成的菜单项的交替背景颜色

Alternating Background Color of Menu Items Generated from query

html

css

jquery

coldfusion-9