Javascript 只有10个可见链接的下拉菜单

因此，我想知道是否有可能使下拉菜单只有10个可见链接，而其余的将是不可见的。如果这是不可能的，是否有可能使它，所以你只能SE10和滚动下来。有什么建议吗

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
对于（i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
#我的输入{
边框框：框大小；
背景图片：url（'searchicon.png'）；
背景位置：14px 12px；
背景重复：无重复；
字体大小：16px；
填充：14px 20px 12px 45px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f6f6f6；
最小宽度：230px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd}
.show{display:block；}

下拉列表

CSS选项：

.show{
    overflow:overlay: //to hide to the other elements
    height:200px; //to show desired number of elements
}

最好使用此元素：

---

.dropdown content

您可以添加前10个项目的高度值并在CSS中手动设置，也可以使用Javascript计算前10个项目的数量并将其高度相加。现在它们都有相同的高度，所以你可以做

h*10

，但是如果由于某种原因某个项目断裂到第二行，你的高度就会降低。我已经更新了你的剪报

我已经更新了

myFunction

函数。您会注意到，在计算高度之前，我添加了

show

类，因为

offseight

如果父对象被隐藏，将始终返回0

单击“关闭”按钮时隐藏 我们可以通过

blur

事件来处理这个问题。我们不使用类似于

onclick

的事件属性，而是单独使用JS来处理这个问题

返回下拉列表的顶部 为了在单击下拉列表后返回下拉列表顶部，我们需要使用

scrollTop

属性。在

myFunction（）

最后一行中，我们在

下拉列表中设置了
scrollTop=0
，该元素将我们滚动到顶部

var btn = document.querySelector('.dropbtn');

btn.addEventListener('blur', function() {
  var dd = document.querySelector('.dropdown-content');
  if ( dd.classList.contains('show') ) {
    dd.classList.remove('show');
  }
});


函数myFunction（）{
var dropDown=document.getElementById（'myDropdown'），
items=下拉列表.children，
高度=0；
下拉列表.classList.toggle（'show'）；
对于（变量i=1；i<10；i++）{
高度+=项目[i]。视线外；
}
dropDown.style.height=高度+px；
dropDown.scrollTop=0；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
对于（i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}
var btn=document.querySelector（'.dropbtn'）；
btn.addEventListener（'blur'，function（）{
var dd=document.querySelector（'.dropdown content'）；
if（dd.classList.contains（'show'））{
dd.classList.remove（'show'）；
}
});
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，
.dropbtn:焦点{
背景色：#3e8e41；
}
#我的输入{
边框框：框大小；
背景图片：url（'searchicon.png'）；
背景位置：14px 12px；
背景重复：无重复；
字体大小：16px；
填充：14px 20px 12px 45px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f6f6f6；
最小宽度：230px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停{
背景色：#ddd
}
.表演{
显示：块；
}

下拉列表
编辑：新答案：

.show{
    overflow:overlay: //to hide to the other elements
    height:200px; //to show desired number of elements
}

我误解了这个问题。您可以稍微修改过滤函数，以跟踪显示的项目（10），然后只要在打开菜单时调用一次即可。这样，在打开菜单和进行筛选时，最多可显示10个项目。小提琴：

那么看不见的东西的目的是什么呢？它不起作用，第n种类型会考虑所有的东西，甚至是隐藏的。不，没那么简单。啊，我明白了，我想我误解了这个问题。我会编辑我的回答嗨，我想知道你是否能帮我一点忙#1-当你按下滴管外的按钮时，它不会关闭#2-当您关闭下拉列表，然后再次书写时，它不会从列表的顶部开始。@Aleksanderanum我已经更新了您第一个问题的答案。至于第二个，我不知道你的意思。当你打开下拉列表时，你位于列表的顶部，然后向下滚动，然后关闭下拉列表。然后打开下拉列表
.dropdown-content a:nth-of-type(n+11) {
  display:none;
}