Question

我有一个div，其中包含一些内容，这些内容会在5秒后隐藏起来，但是在它下面，我有一个带有某些选项的下拉菜单。因此，当打开选择框并同时隐藏div时会发生什么，选项框将保留在同一位置，并且不会随选择框向上移动。

创建自定义下拉列表不是一种选择。以及使上述div绝对或固定。也不能进行下拉模糊处理。有人可以告诉我是否可以更改此默认行为吗？

客户不同意定制解决方案。
客户不希望上述div浮动或绝对或固定位置。他想要相同的设置，但此问题已解决。

关闭选择框或使用blur（）也不是客户端想要的。

<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div class='war'>SOME RANDOM CODE which gets hidden after 5 seconds. Make sure to open the drop down</div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
setTimeout(function(){ $(".war").hide(); }, 3000);
</script>
</body>
</html>

Answer 1

该解决方法如何：

-单击选择菜单时，它的大小属性与其所有包含的选项元素一样大，以便它随窗口中的元素一起消失时随其移动。
-如果添加一些CSS样式，则对于用户来说，在选择选项的过程中选择元素的大小已更改的情况并不明显。
-不幸的是，标准箭头样式会因浏览器而异。我的解决方案在chrome中看起来最好，但在firefox中不是最优的-因此应添加针对浏览器的进一步优化。
这是相应的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
<style>
  #box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  
  #options {
    overflow: hidden;
  }
  
  #first::after {
  content: "  ⯆ ";
  font-size: 10px;
  }

  </style>
  </head>
<body>
<div id="box"></div>
  <select name="selectionarea" id="options" onclick="makeBoxDisappear();expandSelect()" onfocusout="minimizeSelect()">
    <option value="option1" id="first">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>    
  </select>
  <script>
  
  function makeBoxDisappear() {
    setTimeout(() => document.getElementById("box").style.display = "none", 1000);
  }

  
  function expandSelect() {
    document.getElementById("options").size="5";
  }


  function minimizeSelect() {
    document.getElementById("options").size="1";
  }

  </script>
</body>
</html>

下拉选项不会随选择框一起移动

1 个答案: