drop-down-menu 相关问题

用户界面控件GUI元素，类似于列表框，允许用户从列表中选择一个值。当下拉列表处于非活动状态时，它会显示单个值。激活后，它会显示（下拉）一个值列表，用户可以从中选择一个值。

在 Bootstrap 5 菜单中，在第一项中按向上箭头键或在最后一项中按向下允许键不会执行任何操作。如何制作箭头，如果在第一项中按下，则移动到菜单中的最后一项，而向下箭头则移动到...

javascript html twitter-bootstrap drop-down-menu bootstrap-5

回答 1 投票 0

我需要一个标准的下拉菜单来在鼠标移开时关闭。我尝试了一些方法，但到目前为止，没有任何效果。我需要一个标准的下拉菜单来在鼠标移开时关闭。我尝试了一些方法，但到目前为止，没有任何效果。 <select> <option value="0" selected="selected" disabled="disabled">Options</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> 看来你不能用标准的<select>来做到这一点，至少在我尝试过的浏览器中是这样。但是，您可以使用自定义选择来完成此操作。此片段包含 w3schools 代码的修改版本。 var x, i, j, l, ll, selElmnt, a, b, c; /* Look for any elements with the class "custom-select": */ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /* For each element, create a new DIV that will act as the selected item: */ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /* For each element, create a new DIV that will contain the option list: */ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /* For each option in the original select element, create a new DIV that will act as an option item: */ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /* When an item is clicked, update the original select box, and the selected item: */ var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /* When the select box is clicked, close any other select boxes, and open/close the current select box: */ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /* A function that will close all select boxes in the document, except the current select box: */ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /* If the user clicks anywhere outside the select box, then close all select boxes: */ document.addEventListener("click", closeAllSelect); document.querySelector('.select-items').addEventListener('mouseleave', closeAllSelect) /* The container must be positioned relative: */ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element: */ } .select-selected { background-color: DodgerBlue; } /* Style the arrow inside the select element: */ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /* Point the arrow upwards when the select box is open (active): */ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /* style the items (options), including the selected item: */ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /* Style items (options): */ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /* Hide the items when the select box is closed: */ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } <div class="custom-select" style="width:200px;"> <select> <option value="0" selected="selected" disabled="disabled">Options</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </div>

html css drop-down-menu onmouseout

回答 0 投票 0

Wordpress 创建菜单

我创建了一个新菜单，它显示得很好，但问题出在选择上，它把我发送到不存在的页面或帖子，问题，我想，.....更改格式输出，我不这样做't...

php wordpress drop-down-menu

回答 1 投票 0

如何根据日期自动设置下拉列表中的值

我阅读了以下帖子，即 2023 年。如何根据行中另一个单元格的值自动设置下拉列表中的值 - 应用程序脚本我已经根据我的表格修改了它，但是，它......

google-sheets drop-down-menu scripting

回答 1 投票 0

Bootstrap 下拉菜单的 z 索引问题

我在页面顶部的固定导航栏中使用 Bootstrap 的下拉菜单。一切正常，但我遇到了下拉菜单项显示在其他页面元素后面而不是在...中的问题。