$event.stopPropagation()在下拉菜单中失效，求CSS维持open类的解决方案

我完全懂你遇到的困扰——用$event.stopPropagation()尝试让点击"Example 2"时下拉菜单保持打开，但没达到预期效果。这大概率是因为下拉菜单的关闭逻辑绑定在了更高层级的元素上，或者事件传递的时机没处理好。下面给你几个靠谱的替代方案：

方案1：完善事件处理逻辑（JS） #

有时候单纯的stopPropagation()不够，可能需要结合preventDefault()，或者确保事件监听的优先级正确。如果是用类似Bootstrap的下拉组件，可以这样调整：

<ul class="dropdown-menu">
  <li class="dropdown-header"><b>Example</b></li>
  <li><a>Example 1</a></li>
  <li><a onclick="handleStickyItemClick(event)">Example 2</a></li>
  <li><a>Example 3</a></li>
  <li><a>Example 4</a></li>
  <li><a>Example 5</a></li>
</ul>

<script>
function handleStickyItemClick(event) {
  // 阻止事件冒泡到父级的关闭逻辑
  event.stopPropagation();
  // 阻止<a>标签默认跳转行为（如果不需要跳转的话）
  event.preventDefault();
  
  // 手动强制下拉容器保留open类
  const dropdownContainer = document.querySelector('.dropdown');
  dropdownContainer.classList.add('open');
}
</script>

方案2：用CSS的:focus-within伪类实现（无额外JS） #

:focus-within可以检测容器内是否有元素获得焦点，利用这个特性可以让下拉菜单在内部元素被点击（获得焦点）时保持打开状态，非常简洁：

/* 假设下拉容器的类是dropdown */
.dropdown {
  position: relative;
  /* 让容器可以获得焦点 */
  tabindex: 0;
}

.dropdown-menu {
  display: none;
  position: absolute;
  /* 你的菜单样式 */
  background: #fff;
  border: 1px solid #eee;
  padding: 8px 0;
}

/* 当容器内有元素获得焦点时，显示菜单 */
.dropdown:focus-within .dropdown-menu {
  display: block;
}

/* 可选：去掉菜单项的默认焦点边框 */
.dropdown-menu a:focus {
  outline: none;
  background-color: #f5f5f5;
}

调整后的HTML结构：

<div class="dropdown">
  <button class="dropdown-toggle" type="button">下拉菜单</button>
  <ul class="dropdown-menu">
    <li class="dropdown-header"><b>Example</b></li>
    <li><a>Example 1</a></li>
    <li><a>Example 2</a></li>
    <li><a>Example 3</a></li>
    <li><a>Example 4</a></li>
    <li><a>Example 5</a></li>
  </ul>
</div>

方案3：手动控制open类的状态（灵活可控） #

通过监听点击事件，主动维护下拉容器的open类，确保点击指定菜单项时不移除这个类：

<div class="dropdown" id="customDropdown">
  <button class="dropdown-toggle" type="button" onclick="toggleDropdown()">下拉菜单</button>
  <ul class="dropdown-menu">
    <li class="dropdown-header"><b>Example</b></li>
    <li><a onclick="closeDropdown()">Example 1</a></li>
    <li><a onclick="keepMenuOpen(event)">Example 2</a></li>
    <li><a onclick="closeDropdown()">Example 3</a></li>
    <li><a onclick="closeDropdown()">Example 4</a></li>
    <li><a onclick="closeDropdown()">Example 5</a></li>
  </ul>
</div>

<script>
const dropdown = document.getElementById('customDropdown');

function toggleDropdown() {
  dropdown.classList.toggle('open');
}

function closeDropdown() {
  dropdown.classList.remove('open');
}

function keepMenuOpen(event) {
  event.stopPropagation();
  // 不执行移除open类的操作，保持菜单打开
}

// 点击页面其他区域自动关闭菜单
document.addEventListener('click', function(event) {
  if (!dropdown.contains(event.target)) {
    dropdown.classList.remove('open');
  }
});
</script>

<style>
.dropdown-menu {
  display: none;
}

.dropdown.open .dropdown-menu {
  display: block;
}
</style>

这些方案里，CSS的:focus-within方案最简洁，不需要额外JS逻辑；如果需要更精细的控制，手动维护open类的方式更灵活。你可以根据自己的项目环境选择合适的方法~

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