时间戳

首页 > 解决方案 > CSS 在另一个元素处于活动状态时显示元素

javascript - CSS 在另一个元素处于活动状态时显示元素

问题描述

我正在尝试创建一个仅在文本输入处于活动/聚焦状态时才显示列表（ol）的网站

我的代码如下所示：

<form>
   <div>
      <div>
         <div>
            <div> some text </div>
               <div>
                  <label>title</label>
                  <input>text input....</input>
                  <div>some text</div>
               </div>
            <div>some text</div>
         </div>
         <ol class="list">
             ...Elements
         </ol>
      </div>
   </div>
</form>

无法删除 div 或将列表放在与输入相同的 div 中 - 我已经尝试过了，它会破坏布局

我已经尝试了几件事。

css + 运算符，因此 input + list 不起作用，因为这两个元素没有相同的父元素

我也试过:has，由于浏览器支持不好，它不起作用

在 div:hover 显示列表有效，但只要您移动光标，列表就会消失。只要输入处于活动/聚焦状态，它就必须可见

这甚至可以使用 css 还是我需要某种 JavaScript/jQuery 的东西？

标签： javascripthtmlcssfrontendweb-frontend

解决方案

这将起作用：

$('input').focus(function(){
  $('.list').show();
}).focusout(function(){
    $('.list').hide();
});
.list{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
   <div>
      <div>
         <div>
            <div> some text </div>
               <div>
                  <label>title</label>
                  <input>text input....</input>
                  <div>some text</div>
               </div>
            <div>some text</div>
         </div>
         <ol class="list">
             ...Elements
         </ol>
      </div>
   </div>
</form>

推荐阅读