gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:53:08 25 4
gpt4 key购买 nike

我想使用 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% 正常。

当我有这样的东西以灰线结尾时: enter image description here

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

enter image description here

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

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

最佳答案

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

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

参见 fiddle .

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

关于jquery - 使用 jQuery 自定义样式(仅选择奇数 h3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32676275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com