时间戳

首页 > 解决方案 > 下拉选项不随选择框移动

html - 下拉选项不随选择框移动

问题描述

我有一个 div，其中的一些内容在 5 秒后被隐藏，但在它下面，我有一个带有一些选项的下拉菜单。So what happens when the select box is open and at the same time the div gets hidden, the options box remains in the same place and doesn't shift upwards with the select box.

创建自定义下拉菜单不是一种选择。以及使上述 div 绝对或固定。使下拉模糊也不是一种选择。有人能告诉我这种默认行为是否可以以某种方式改变吗？

  1. 客户不同意定制解决方案。
  2. 客户端不希望上述 div 浮动或定位绝对或固定。他想要相同的设置，但这个东西已经修好了。

  3. 关闭选择框或使用 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>

标签： htmldrop-down-menudefault

解决方案

这个解决方法怎么样：

- 单击选择菜单时，它会获得一个大小属性，该属性与其包含的所有选项元素一样大，因此它会随着窗口中的元素一起移动，因为它会消失。
- 如果您添加一些 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>

推荐阅读