添加Schema Markup后Accordion折叠面板无法展开的问题求助

问题概述 #

原本正常运行的Accordion折叠面板，添加Schema结构化标记后第一个面板点击无法展开，第二个面板功能正常。两者的唯一差异是第一个面板额外嵌套了一层Schema标记的div，导致CSS选择器无法正确匹配目标元素。

问题原因 #

原CSS使用**直接兄弟选择器（~）**关联复选框状态与折叠内容、箭头样式，但添加Schema标记后，复选框（<input>）与目标元素（.handle、.content）之间多了一层<div itemtype="Question">，打破了直接兄弟关系，导致选择器失效。

例如原CSS中的两条核心规则：

.accordion>input[type="checkbox"]:checked~.content
.accordion>input[type="checkbox"]:checked~.handle label:before

在第一个面板的嵌套结构中，.content和.handle都位于<div itemtype="Question">内部，并非<input>的直接兄弟，因此选择器无法匹配到目标元素。

修复方案 #

以下两种方案均可保留Schema标记并修复折叠功能，推荐方案1（结构更简洁规范）：

方案1：调整HTML结构，将Schema属性整合到现有元素 #

无需额外添加嵌套div，直接将Schema标记绑定到已有的折叠面板元素上，既保持CSS选择器有效性，又符合Schema规范：

修改后的第一个面板HTML：

<div class="accordion" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  <input type="checkbox" name="collapse1" id="handle1" checked="checked">
  <h2 class="handle" itemprop="name">
    <label for="handle1">1. What is your name?</label>
  </h2>
  <div class="content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
    <p itemprop="text">My name is Adam.</p>
  </div>
</div>

说明：

• 将itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"直接加到.accordion容器上
• 标题<h2>保留itemprop="name"，表示问题标题
• 内容容器.content同时添加itemprop="acceptedAnswer"和Answer类型标记，内容<p>保留itemprop="text"

此方案可同时统一第二个面板的结构，CSS无需修改。

方案2：修改CSS选择器，适配嵌套结构 #

若必须保留原有HTML嵌套结构，修改CSS选择器，将直接兄弟选择器改为后代选择器：

替换原CSS中的两条规则：

/* 替换原有的.content展开规则 */
.accordion>input[type="checkbox"]:checked~div .content {
  height: auto;
  overflow: visible;
  padding: 10px 15px 0px 15px;
  border-top: 2px solid #004287;
  margin-top: 10px;
}

/* 替换原有的箭头旋转规则 */
.accordion>input[type="checkbox"]:checked~div .handle label:before {
  transform: rotate(135deg);
}

说明：

• 将~.content改为~div .content，匹配<input>兄弟div内部的.content元素
• 将~.handle改为~div .handle，匹配嵌套的.handle元素

完整示例代码（方案1） #

<div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
  <div class="accordion" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <input type="checkbox" name="collapse1" id="handle1" checked="checked">
    <h2 class="handle" itemprop="name">
      <label for="handle1">1. What is your name?</label>
    </h2>
    <div class="content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <p itemprop="text">My name is Adam.</p>
    </div>
  </div>
  <div class="accordion" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <input type="checkbox" name="collapse2" id="handle2">
    <h2 class="handle" itemprop="name">
      <label for="handle2">2. What's your hobby?</label>
    </h2>
    <div class="content" itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <p itemprop="text">Playing outdoor sports.</p>
    </div>
  </div>
</div>

CSS保持原代码不变即可。

内容的提问来源于stack exchange，提问作者Shoeb Siddique