如何将h3元素的hover触发改为click触发？

嘿，别担心，我完全get到你的需求啦！原本鼠标悬停h3就能显示内容，现在想改成点击才触发，但改了没效果对吧？咱们来一步步搞定这个问题～

首先得说清楚：CSS里的:hover是鼠标悬停触发，但没有原生的:click伪类哦，如果你之前只是把:hover换成:active，那只会在点击按住的瞬间显示内容，松开就消失了，这肯定不是你想要的效果。下面给你两种靠谱的实现方式，按需选就行：

这种方法不用写JS，利用隐藏的复选框状态来控制内容的显示/隐藏，适合简单场景：

结构代码 #

<div class="toggle-group">
  <!-- 隐藏的复选框，用来记录点击状态 -->
  <input type="checkbox" id="toggle-item-1" class="toggle-checkbox">
  <!-- 用label关联复选框，点击h3就相当于点击复选框 -->
  <label for="toggle-item-1" class="toggle-trigger">
    <h3>第一个标题</h3>
  </label>
  <!-- 需要切换显示的内容 -->
  <div class="toggle-content">这是第一个标题对应的内容</div>
</div>

<div class="toggle-group">
  <input type="checkbox" id="toggle-item-2" class="toggle-checkbox">
  <label for="toggle-item-2" class="toggle-trigger">
    <h3>第二个标题</h3>
  </label>
  <div class="toggle-content">这是第二个标题对应的内容</div>
</div>

样式代码 #

/* 隐藏复选框，不占页面空间 */
.toggle-checkbox {
  display: none;
}

/* 默认隐藏内容 */
.toggle-content {
  display: none;
  margin-top: 8px;
}

/* 当复选框被选中时，显示对应的内容 */
.toggle-checkbox:checked + .toggle-trigger + .toggle-content {
  display: block;
}

/* 给标题加个鼠标指针，提示可点击 */
.toggle-trigger {
  cursor: pointer;
  display: inline-block;
}

如果你的页面结构不想改，或者需要更复杂的交互（比如点击其他地方自动关闭内容），用JS会更合适：

结构代码 #

<div class="toggle-group">
  <h3 class="toggle-trigger">第一个标题</h3>
  <div class="toggle-content">这是第一个标题对应的内容</div>
</div>

<div class="toggle-group">
  <h3 class="toggle-trigger">第二个标题</h3>
  <div class="toggle-content">这是第二个标题对应的内容</div>
</div>

样式代码 #

/* 默认隐藏内容 */
.toggle-content {
  display: none;
  margin-top: 8px;
}

/* 激活状态下显示内容 */
.toggle-content.active {
  display: block;
}

/* 提示可点击 */
.toggle-trigger {
  cursor: pointer;
}

JavaScript代码 #

// 找到所有的标题元素
const triggers = document.querySelectorAll('.toggle-trigger');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function() {
    // 获取当前标题对应的内容元素
    const content = this.nextElementSibling;
    // 切换内容的active类，实现显示/隐藏
    content.classList.toggle('active');

    // 可选：如果想要点击其他标题时，关闭已经打开的内容，就加这段代码
    // triggers.forEach(otherTrigger => {
    //   if (otherTrigger !== trigger) {
    //     otherTrigger.nextElementSibling.classList.remove('active');
    //   }
    // });
  });
});

试试上面的方法，应该就能实现你想要的点击触发显示内容的效果啦！

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