jquery - 使用 jQuery 自定义样式(仅选择奇数 h3)

Question

我想使用 jQuery 更改奇数字幕!

我现在有这段代码:

  <script>
  $(function() {

    $( ".accordion" ).accordion({
      active: false,
      collapsible: true,
      heightStyle: "content", 
      alwaysOpen: false
    });

    $(".accordion .accordion h3:odd").css( "background-color", "white" );

  });
  </script>


  <p class="question" style="font-size: 19px!important;">
    Contact Us: 
  </p>

  <p class="answer">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  </p>


  <p class="question"  style="font-size: 19px!important;">
    Frequently Asked Questions:
  </p>



<div class="accordion">


  <h3>My Account</h3>

  <div class="accordion">

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>


  </div>

<div class="accordion">


  <h3>My Account</h3>

  <div class="accordion">

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>

    <h3 class="rotation">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
    <div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
    </div>


  </div>

结果并非 100% 正常。

当我有这样的东西以灰线结尾时:

在下一个中，我得到了以白色背景而不是灰色背景开头的子标题:

我没有成功使用 CSS 如果你坚持要帮助我处理 CSS，请做我的客人:)

http://jsfiddle.net/09c2q7xo/4/ * 无法添加 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Answer 1

用简单的 CSS 选择器替换您的 jQuery:

.accordion .accordion h3:nth-of-type(2n) {
    background-color: white;
}

参见 fiddle .

注意:这需要 CSS3 支持级别。