Question

我正在尝试使用滚动视图执行DropDown菜单，但我刚刚实现向下滚动是水平...但不是垂直。

此外，我不知道如何在菜单中选择一个选项之后保留该选项。例如，如果我选择波兰，我希望该选项为冷杉并显示波兰。

HTML code。

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Country</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" 
onkeyup="filterFunction()">

<a href="#about">Albania <img src="themes/images/flags/Albania.png" 
width="25" height="6" alt=""/></a>

 <a href="#about">Andorra <img src="themes/images/flags/Andorra.png" 
width="25" height="6" alt=""/></a>

  <a href="#about">Argentina <img src="themes/images/flags/Argentina.png" 
width="25" height="6" alt=""/></a>

   <a href="#about">Austria <img src="themes/images/flags/Austria.png" 
width="25" height="6" alt=""/></a>

    <a href="#about">Poland <img src="themes/images/flags/Poland.png" 
width="25" height="6" alt=""/></a>

</div>

JAVA SCRIPT代码

<script>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
    } else {
        a[i].style.display = "none";
    }
}
}
</script>

CSS代码：

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

.dropdown {
position: relative;
display: inline-block;

}

.dropdown-content {
display: none;

position: absolute;
background-color: #f9f9f9;
width: 160px;
overflow:scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

}

.dropdown a:hover {background-color: #f1f1f1}



.show {display:block;}

Answer 1

我认为你的方式几乎不可能维持，因为你将改变每个键上的html项目的顺序，这并不是很好。更好的想法是将数据分成数组并根据用户搜索显示。

我为你做了一个快速的傻瓜，请看看：

`var items = [
    { country: "Albania" , href: "#about" },
    { country: "Albannn1ia" , href: "#about" },
    { country: "Albdorra" , href: "#about" },
    { country: "Albrgentina" , href: "#about" },
    { country: "Austria" , href: "#about" },
    { country: "Portugal" , href: "#about" },
    { country: "Poland" , href: "#about" },
    { country: "Polonia" , href: "#about" }
];
var chosenItems = items;
https://jsfiddle.net/gugalondon/5cny3qxr/4/`

DropDown菜单，包含HTML和CSS中的Scroll View

1 个答案: