如何点击南瓜图标保持Dropdown展开可输入，点击外部关闭（禁用JS）

问题 #

我需要实现以下效果：

• 点击南瓜图标按钮后，保持.header-bar-mobile-drop-down__item下拉框处于展开状态，方便在其中的输入框输入内容；
• 点击页面除下拉框外的其他任意区域时，下拉框关闭。

已知需要修改以下选择器：

• .header-bar-mobile-drop-down__icon-button:focus
• .header-bar-mobile-drop-down__item

要求：尽量避免使用JavaScript实现。我之前尝试在父类中使用&:focus但没有效果。

原CSS代码 #

.header-bar__top {
  height: 3.5rem;
  background-color: greenyellow;
  z-index: 100;
  /* box-shadow: $header-bar-shadow; */
  padding-top: 15px;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar-mobile-drop-down {
  display: inline;
}

.header-bar-mobile-drop-down__icon-button {
  color: darkblue;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  float: right;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__item {
  visibility: hidden;
  opacity: 0;
  border: 1px solid orange;
}

.header-bar-mobile-drop-down__icon-button:focus
  + .header-bar-mobile-drop-down__item {
  visibility: visible;
  opacity: 1;
  margin-top: 41px;
  height: 4.25rem;
  background-color: palegreen;
  display: inline-flex;
  opacity: 1;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.header-bar-utility {
  height: 100%;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  float: left;
  color: pink;
  background-color: transparent;
  border: none;
  font-size: 16px;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}

.header-bar-utility__icon {
  display: inline;
  font-size: 1.5rem;
}

.header-bar {
  height: 3.5rem;
  box-shadow: none;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./test.css" />
    <title>Dropdown</title>
  </head>
  <body>
    <div class="header-bar">
      <div class="header-bar__top">
        <div class="header-bar__container">
          <div class="header-bar-mobile-drop-down">
            <button
              class="header-bar-mobile-drop-down__icon-button"
              tabindex="1"
            >
              🎃 1
            </button>
            <div class="header-bar-mobile-drop-down__item">
              <input placeholder="Search" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1>Text overlayed</h1>
  </body>
</html>

解决方案 #

核心是利用CSS的:focus-within伪类——它会在容器本身或其任意子元素获得焦点时触发样式，完美解决点击输入框时下拉框关闭的问题，同时无需JavaScript。

修改步骤 #

1. 调整HTML结构：给下拉框的父容器.header-bar-mobile-drop-down添加tabindex="-1"，让它可以接收焦点但不干扰键盘导航顺序：

<div class="header-bar-mobile-drop-down" tabindex="-1">

2. 修改CSS样式：替换原有的按钮焦点关联样式，改用父容器的:focus-within控制下拉框显示，同时优化焦点状态：

.header-bar-mobile-drop-down {
  display: inline;
  outline: none; /* 移除默认焦点边框，可选 */
}

/* 父容器或子元素获得焦点时，显示下拉框 */
.header-bar-mobile-drop-down:focus-within .header-bar-mobile-drop-down__item {
  visibility: visible;
  opacity: 1;
  margin-top: 41px;
  height: 4.25rem;
  background-color: palegreen;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

/* 移除按钮默认焦点样式，可选 */
.header-bar-mobile-drop-down__icon-button:focus {
  outline: none;
}

完整修改后代码 #

CSS代码

.header-bar__top {
  height: 3.5rem;
  background-color: greenyellow;
  z-index: 100;
  /* box-shadow: $header-bar-shadow; */
  padding-top: 15px;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar-mobile-drop-down {
  display: inline;
  outline: none;
}

.header-bar-mobile-drop-down__icon-button {
  color: darkblue;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  float: right;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__item {
  visibility: hidden;
  opacity: 0;
  border: 1px solid orange;
}

.header-bar-mobile-drop-down:focus-within .header-bar-mobile-drop-down__item {
  visibility: visible;
  opacity: 1;
  margin-top: 41px;
  height: 4.25rem;
  background-color: palegreen;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.header-bar-mobile-drop-down__icon-button:focus {
  outline: none;
}

.header-bar-utility {
  height: 100%;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  float: left;
  color: pink;
  background-color: transparent;
  border: none;
  font-size: 16px;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}

.header-bar-utility__icon {
  display: inline;
  font-size: 1.5rem;
}

.header-bar {
  height: 3.5rem;
  box-shadow: none;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./test.css" />
    <title>Dropdown</title>
  </head>
  <body>
    <div class="header-bar">
      <div class="header-bar__top">
        <div class="header-bar__container">
          <div class="header-bar-mobile-drop-down" tabindex="-1">
            <button
              class="header-bar-mobile-drop-down__icon-button"
              tabindex="1"
            >
              🎃 1
            </button>
            <div class="header-bar-mobile-drop-down__item">
              <input placeholder="Search" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <h1>Text overlayed</h1>
  </body>
</html>

效果说明 #

• 点击南瓜按钮时，父容器获得焦点，下拉框展开；
• 点击输入框时，父容器因:focus-within保持激活状态，下拉框持续展开；
• 点击页面其他区域时，父容器失去焦点，下拉框自动关闭。

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