Question

我正在尝试创建一个仅在文本输入处于活动状态/集中显示时显示列表（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 +运算符，因为这两个元素没有相同的父元素，所以输入+列表不起作用

我也尝试过：has，由于浏览器支持不佳而无法正常工作

在div：hover上显示列表是可行的，但是一旦移动光标，列表就会消失。只要输入处于活动/焦点状态，它就必须可见

使用CSS甚至可以做到这一点吗？还是我需要某种JavaScript / jQuery的东西？

Answer 1

这将起作用：

$('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>

Answer 2

我认为这就是您想要的。（我正在使用jquery，请记住在head标签中导入cdn）。

@ nejc26建议我实际上是什么错误：他只是更改了列表的不透明度，但是如果列表中的链接在哪里呢？他们将是可点击的。实际上，css opacity属性只是改变了元素的可见性，但是给用户提供了与之交互的可能性。阅读更多here和here

$(document).ready(function(){
  $(".input").focus(function(){
    $(".list").css("display","block")
  });
  $(".input").focusout(function(){
    $(".list").css("display","none")
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input">
<ol class="list" style="display: none">
  <li>Carl</li>
  <li>Peter</li>
  <li>John</li>
  <li>...</li>
</ol>

（要显示结果，请点击上方的“运行代码段”按钮）
应用于您的答案的是这样的

$(document).ready(function(){
      $(".input").focus(function(){
        $(".list").css("display","block")
      });
      $(".input").focusout(function(){
        $(".list").css("display","none")
      });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
   <div>
      <div>
         <div>
            <div> some text </div>
               <div>
                  <label>title</label>
                  <input class="input">text input....</input>
                  <div>some text</div>
               </div>
            <div>some text</div>
         </div>
         <ol class="list" style="display: none">
             ...Elements
         </ol>
      </div>
   </div>
</form>

Answer 3

普通的javascript也可以，您可以在id和ol上添加input。

let input = document.querySelector('#test');
let list = document.querySelector('#list');

input.addEventListener('focus', (e) => {
  toggleList();
})
input.addEventListener('blur', (e) => {
  toggleList();
})

function toggleList() {
  list.classList.toggle('list')
}

.list {
  display: none;
}

<form>
  <div>
    <div>
      <div>
        <div> some text </div>
        <div>
          <label>title</label>
          <input id="test" />
          <div>some text</div>
        </div>
        <div>some text</div>
      </div>
      <ol id="list" class="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ol>
    </div>
  </div>
</form>

与id一起使用，并用于单个二重奏输入/ ol。如果您需要重复几次输入/ ol，请在问题中进行说明：）

有关信息：

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 4

这可以通过纯CSS完成，但是您需要对列表或输入进行一些定位技巧。这是一个建议，告诉你我的意思：

<form>
   <div>
      <div class="component">
         <div>
            <div> some text </div>
               <div>
                  <label for="input">title</label>
                  <div>some text</div>
               </div>
            <div>some text</div>
         </div>
         <input class="input" id="input" />
         <ol class="list">
           <li>Element 1</li>
           <li>Element 2</li>
         </ol>
      </div>
   </div>
</form>

.component {
  position: relative;
}

.input {
  position: absolute;
  top: 18px;
  left: 35px;
}
.list {
  display: none;
}
.input:focus + .list {
  display: block;
}

Answer 5

像这样吗？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
        </style>
    </head>
    <body>
        <form>
            <div>
               <div>
                  <div>
                     <div> some text </div>
                        <div>
                           <label>title</label>
                           <input onfocus="Focus()">text input....</input>
                           <div>some text</div>
                        </div>
                     <div>some text</div>
                  </div>
                  <ol id="list" style="opacity: 0%;">
                      ...Elements
                  </ol>
               </div>
            </div>
         </form>
         <script>
             function Focus()
             {
                 document.getElementById("list").style.opacity = "100%";
             }
             </script>
    </body>
</html>

是的。我确实必须使用一些JavaScript。祝你有美好的一天！

当另一个元素处于活动状态时，CSS显示元素

5 个答案: