【发布时间】：2022-07-07 23:28:31
【问题描述】：
我正在创建一个手风琴，其中第一个元素是打开的。归功于代码here。
对这段代码的主要修改是我想在主标题下放一些潜台词，所以我创建了一个 div 并将 h2 和 h3 包装在其中。你可以在下面看到我的 HTML、CSS 和 JS：
$(function() {
$(".accordion-content:not(:first-of-type)").css("display", "none");
$(".js-accordion-title:first-of-type").addClass("open");
$(".js-accordion-title").click(function() {
$(".open").not(this).removeClass("open").next().slideUp(300);
$(this).toggleClass("open").next().slideToggle(300);
});
});.accordion-title {
border-top: 1px solid #BEBEBE;
padding: 2em 0;
background: #F7F7F7;
}
.accordion-container .accordion-title h2 {
position: relative;
margin: 0;
background-color: #F7F7F7;
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color: #DA15B6;
text-align: center;
cursor: pointer;
margin-bottom: .125em;
}
.accordion-container .accordion-title h3 {
background-color: #F7F7F7;
font-size: 18px;
letter-spacing: 0.9px;
line-height: 1.5em;
font-weight: 600;
text-transform: uppercase;
color: #000;
text-align: center;
}
.price-number {
font-size: 25px;
letter-spacing: 0.54px;
font-weight: 700;
}
.accordion-container .accordion-title h2::after {
content: '3';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
content: '2';
position: absolute;
right: 25px;
bottom: -10px;
font-size: 1.3em;
}
/*CSS for CodePen*/
.accordion-content {
padding-left: 2.3125em;
}
.accordion-container {
width: 100%;
margin: 0 auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" class="accordion-container">
<div class="accordion-title js-accordion-title">
<h2 class="price-plan-name">Standard</h2>
<h3 class="starting-price">Starting at
<span class="price-number">$1,650</span></h3>
</div>
<div class="accordion-content">
<p>Accordion Content1</p>
</div>
<div class="accordion-title js-accordion-title">
<h2>Pro</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$2,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content2
</div>
<div class="accordion-title js-accordion-title">
<h2>Elite</h2>
<h3 class="accordion-subtitle">Starting at
<span class="price-number">$3,950</span></h3>
</div>
<div class="accordion-content">
Accordion Content3
</div>
</div>我遇到的问题是尝试在页面加载时打开第一个手风琴内容。这应该可以通过 JS 的第一行来实现，"$(".accordion-content:not(:first-of-type)").css("display", "none");"但它似乎不起作用。我认为这与 div "accordion-title" 和 div "accordion-content" 之间的冲突有关。例如，如果我将“accordion-content”更改为具有 p 或 h5 标签，则代码将正常工作。关于如何解决这个问题有什么建议吗？
提前致谢。
【问题讨论】：
-
<div class="accordion-content">匹配.accordion-content，它是一个div，它是父级中的第二个div，所以它匹配:not(:first-of-type)。您是否期望:first-of-type表示“与其他选择器相结合的第一件事”？ -
@Quentin 我认为
:not(:first-of-type)的想法是除了第一个accordion-content之外的所有display: none。我以与原始 codepen 相同的方式接近它。 -
没有。
:not(:first-of-type)表示“不是第一个元素，在父元素中，属于同一类型”，该类型为div。 -
我明白了，这打破了
:not(:first-of-type)的含义，我更容易理解。正如@Huangism 建议的那样，将伪类更改为:first适用于这种情况。
标签： javascript html jquery css