如何在输入聚焦时激活下拉菜单？

Question

我正在尝试制作一个 reddit 克隆 MERN 并且需要像 reddit 搜索栏中的 dorpdown 这样的下拉菜单

样式不是问题问题是当输入栏获得焦点时使下拉菜单出现

我也在使用tailwindcss

谁能告诉我怎么做？

Answer 1

const show = () => {
  document.querySelector('.content').classList.add("active")
}

const hide = () => {
  document.querySelector('.content').classList.remove("active")
}

.dropdown{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 200px;
}

input{
  width: 100%;
}

.content{
  background: red;
  padding: 4px;
  position: absolute;
  top: 100%;
  width: 100%;
  display: none;
}

.active{
  display: flex;
  
  }

<div class = "dropdown">
  <input onFocus = "show()" onBlur = "hide()" />
  <div class = "content">
    Dropdown
  </div>
</div>

React 和 Tailwind

const Dropdown = () => {
  const [isFocus, setIsFocus] = React.useState(false);
  return (
    <div className = "w-40 border m-4">
      <input
        className = "w-full"
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
      />
      { isFocus && <div className = "bg-red-300">Dropdown</div>}
    </div>
  );
};

Answer 2

我想你想显示 select 不仅仅是当你关注 input 时，而且当你与 select 交互时：你可以完全避免 JS 而使用:focus-within 伪类

.dropdown select {
  display: none;
}

.dropdown:focus-within select {
  display: block;
}

<div class="dropdown">
  <input />
  <select>
    <option>option</option>
  </select>
</div>

但如果您需要它仅在输入焦点上工作

.dropdown select {
  display: none;
}

.dropdown input:focus + select {
  display: block;
}

<div class="dropdown">
  <input />
  <select>
    <option>option</option>
  </select>
</div>

如何在输入聚焦时激活下拉菜单？

how to have a dropdown activate when input is focused?

html

css

frontend

tailwind-css