求助：通过CSS实现勾选Automobiles时显示/隐藏Auto Parts子类别

嘿，我明白你遇到的麻烦了——插件生成的HTML没法随便改，想做个勾选「Automobiles」时显示/隐藏「Auto Parts」的功能却找不到头绪对吧？别担心，咱们可以用纯JavaScript来搞定，不用修改原HTML结构，下面给你几个可行的方案：

因为你没法控制插件生成的HTML结构，咱们只能通过选择器定位元素+事件监听来实现功能，下面分场景给你代码：

场景1：元素在页面加载时已存在 #

如果插件是在页面初始化阶段就生成了这些分类元素，用这段代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 1. 定位「Automobiles」复选框——请根据你的实际HTML调整选择器
  // 示例：匹配跟包含"Automobiles"的label相邻的复选框
  const autoCheckbox = document.querySelector('input[type="checkbox"]:has(+ label:contains("Automobiles"))');
  
  // 2. 定位「Auto Parts」的容器——同样根据实际结构调整
  // 示例：匹配包含"Auto Parts"标签的父容器
  const autoPartsSection = document.querySelector('div:has(label:contains("Auto Parts"))');

  if (autoCheckbox && autoPartsSection) {
    // 初始状态：复选框未勾选时隐藏子类别
    autoPartsSection.style.display = autoCheckbox.checked ? 'block' : 'none';

    // 监听复选框状态变化，切换显示/隐藏
    autoCheckbox.addEventListener('change', function() {
      autoPartsSection.style.display = this.checked ? 'block' : 'none';
    });
  } else {
    console.warn('未找到目标元素！请右键检查页面元素，调整代码里的选择器');
  }
});

场景2：元素是插件异步动态生成的 #

如果插件是延迟加载（比如通过AJAX）生成这些分类元素，上面的代码可能找不到目标元素，这时候用MutationObserver监听DOM变化：

// 创建DOM观察者，等待目标元素出现
const observer = new MutationObserver(function(mutations) {
  const autoCheckbox = document.querySelector('input[type="checkbox"]:has(+ label:contains("Automobiles"))');
  const autoPartsSection = document.querySelector('div:has(label:contains("Auto Parts"))');

  if (autoCheckbox && autoPartsSection) {
    // 初始化显示状态
    autoPartsSection.style.display = autoCheckbox.checked ? 'block' : 'none';
    
    // 绑定勾选事件
    autoCheckbox.addEventListener('change', function() {
      autoPartsSection.style.display = this.checked ? 'block' : 'none';
    });
    
    // 找到元素后停止监听，避免浪费资源
    observer.disconnect();
  }
});

// 开始监听整个页面的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

关键提示：适配你的HTML调整选择器 #

如果上面的示例选择器不生效，你可以右键点击页面上的「Automobiles」复选框，选择「检查」查看元素属性，然后修改选择器：

• 若复选框有专属class：input.category-checkbox[value="Automobiles"]
• 若有父容器id：#category-group input[type="checkbox"]
• 也可以用XPath精准匹配文本内容：

// 用XPath定位包含"Automobiles"的label对应的复选框
const autoCheckbox = document.evaluate(
  '//label[contains(text(), "Automobiles")]/preceding-sibling::input[@type="checkbox"]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;

只需要把代码里的选择器换成和你页面匹配的版本，就能绕过插件的HTML限制实现功能啦！

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