2012-03-27 35 views
0

我有一个jquery手风琴,我想使用nth孩子分配奇数/偶数背景。与奇数/偶数行的jquery手风琴的第n孩子问题

的结构是这样的:

<div class="jobmenu accordion"> 
    <a> 
     <section> 
      <article><img.....></article> 
      <article>Item 1 name</article> 
      <article>123</article> 
     </section> 
    </a> 
    <div> 
     <table class="itemTable"> 
      <thead>...</thead> 
      <tbody>...</tbody> 
     </table> 
    </div> 
    <a> 
     <section> 
      <article><img.....></article> 
      <article>Item 2 name</article> 
      <article>432</article> 
     </section> 
    </a> 
    <div> 
     <table class="itemTable"> 
      <thead>...</thead> 
      <tbody>...</tbody> 
     </table> 
    </div>  
</div> 

第n个孩子完美的作品在分配奇数和偶数值在TBODY的TRS表,但我想要做的手风琴一样。这些文章都可以正常工作,设置的宽度可以让第n个孩子对可折叠列表具有统一的外观,但每个“a”都被分配给奇数样式。除非我在php中为它添加了一个类,但是这不利于清理css设计。

CSS是:

.jobmenu a { 
    height:40px; 
} 

.jobmenu a:nth-child(even){ 
    background: #CCC; 
    font-size: 12px; 
    display: block; 
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/ 
    width: auto; 
    padding: 4px 0; 
    padding-left: 10px; 
    padding-right:10px; 
    text-decoration: none; 
    cursor:pointer; 
} 

.jobmenu a:nth-child(odd){ 
    background: #999; 
    font-size: 12px; 
    display: block; 
    position: relative; /*To help in the anchoring of the ".statusicon" icon imageglossyback.gif*/ 
    width: auto; 
    padding: 4px 0; 
    padding-left: 10px; 
    padding-right:10px; 
    text-decoration: none; 
    cursor:pointer; 
} 
.jobmenu article:nth-child(1) 
{ 
    width:350px; margin-left:15px; text-wrap:normal; float:left; 
} 

.jobmenu article:nth-child(2) 
{ 
    width:100px; float:left; 
} 

.jobmenu article:nth-child(3) 
{ 
    width:200px; float:left; 
} 

我猜想这是因为A是在奇数位置的div是偶数。有没有解决的办法?

回答

1
.jobmenu a:nth-child(4n+1){ 
    /*style*/ 
} 

我试过,它的工作原理。