我有一个动态填充的基于 div 的下拉菜单,当客户在其中放置大量条目时,它会延伸到屏幕末尾,隐藏较低的条目。它位于一组数据输入行(td 元素)的一列上,因此可用空间因输入的行而异。
不幸的是,这是我继承的一个应用程序,没有任何帮助,也没有真正的技能来维护,所以我会很感激“像我五岁一样解释”。另外,对于文字墙,我深表歉意。
通过广泛的谷歌搜索和对应用程序中其他代码的检查,我相信 optionsCollection 可以解决这个特定问题,但我需要在所选值发生变化时触发一个函数来设置其他数据,但还没有找到解决方法与 optionsCollection。
不幸的是,这个东西太大了,无法发布,如果我试图将问题打包成一个独立的问题,我可能会破坏它,所以这是我认为的相关代码。
分区
<div class="empform">
<html:form action="/processBlank">
<div id="divJobClass" style="visibility: hidden; position: absolute; height="50px"
border-color: #fff; border-style:solid; border-width: 1px; background: white; opacity: 1">
<table id="tableJobClass" cellspacing="0" style="border-color: #9090ff; border-style:solid; border-width:1px;" cellpadding="0"> <%
ctr = 0;
for (JobClassVO jc : jcList) { // href="setJC(<%=jc.getGuid()% >, '< %=jc.getJcIdDesc()% >')" %>
<tr><td><input style="border: none; background: white" type="text"
id="jc<%=ctr%>" size="50" value="<%=jc.getJcIdDesc()%>" readonly="readonly"
onclick="setJC(<%=jc.getGuid()%>, '<%=jc.getJcIdDesc()%>', <%=ctr%>)"
onkeydown='jcListCheck(event);'></td></tr><%
ctr++;
}
%>
通过点击字段触发下拉列表
<td>
<html:hidden name="erfEmployee" property="jcGUIDString" indexed="true"/>
<html:text name="erfEmployee" property="jcId" indexed="true"
size="8" maxlength="25" onblur='<%= "isLastRow('JobClass', " + count + ");" %>'
onclick='<%= "showJcList(" + count + ");" %>'
onkeydown='<%= "jcCheck(event," + count + ");" %>'
onchange='<%= "verifyHoursClass(" + count + ");" %>' readonly="true" />
</td>
isLastRow、jcCheck 和onChange 与外观无关。 使div出现的函数
function showJcList(index) {
var fld = elem("erfEmployee[" + index + "].erfEeSsnFormatted");
if (fld.value == "")
return;
var div = elem_("divJobClass");
jcGuidTarget = elem("erfEmployee["+index+"].jcGUIDString");
jcIdTarget = elem("erfEmployee["+index+"].jcId");
showList(jcIdTarget, div, jcGuidTarget);
focusSelected("jc", null, <%=jcList.size()-1%>);
}
function showList(idTarget, div, guidTarget) {
ddDiv = div;
if (ddDiv.style.visibility == "visible") {
ddDiv.style.visibility = "hidden";
return;
}
var iTop = 0, oNode = idTarget, iLeft = 0;
while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
oNode = idTarget;
while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
ddDiv.style.left = "" + iLeft + "px";
ddDiv.style.top = "" + (iTop + idTarget.offsetHeight) + "px";
ddDiv.style.visibility = "visible";
ddIdTarget = idTarget;
ddGuidTarget = guidTarget;
}
我搜索过的几个网站建议使用 overflow:auto 并设置大小,但这似乎没有任何改变。也许我搞砸了设置大小?但在我看来,固定大小无济于事,因为可用空间取决于输入的行。我发现 overflow:scroll 给了我水平和垂直滚动条,但滚动条只是随着 div 延伸到屏幕末端。我已经考虑过尝试弄清楚还剩下多少空间,并使 div 看起来足够高以适合,但我认为那会很丑陋。如果必须的话,我会去那里。
任何提示、帮助和想法的指针都将不胜感激。谢谢。
最佳答案
这是编写扩展小部件时的常见问题。
你只需要
- 为元素设置所需的
max-height
; - 设置
overflow-y: auto
让它只在需要的时候添加滚动条; - 用javascript计算元素的
top
位置加上元素的height
是否高于height >viewport(窗口可见区域); - 如果它溢出了,那就做点什么。通常,通常的行为是反转下拉菜单的方向,使其从父元素的底部开始,向顶部增长。
看看 jsFiddle example 使用 jQuery 制作(为了方便)。调整窗口大小,看看溢出的元素会发生什么。
或者只运行下面的代码片段:
$(".dropdown li").on('mouseenter mouseleave', function(e) {
var submenu = $('ul:first', this);
var submenuTop = submenu.offset().top;
var submenuHeight = submenu.height();
var viewportHeight = $(window).height();
var isOverflowing = (submenuTop + submenuHeight > viewportHeight);
if (isOverflowing) {
submenu.css("top", $(this).height() - submenuHeight);
} else {
submenu.css("top", 0);
}
});
* {
box-sizing: border-box;
}
body {
background: dodgerBlue;
}
.dropdown,
.dropdown li,
.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown {
width: 100%;
}
.dropdown ul {
position: absolute;
top: 100%;
left: 100%;
visibility: hidden;
display: none;
z-index: 1;
width: 200px;
max-height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
.dropdown li {
position: relative;
float: left;
clear: both;
}
.dropdown li:hover {
z-index: 910;
}
.dropdown ul:hover,
.dropdown li:hover>ul,
.dropdown a:hover+ul,
.dropdown a:focus+ul {
visibility: visible;
display: block;
}
.dropdown a {
display: block;
background: #000;
color: #fff;
padding: 5px 20px;
text-decoration: none;
}
.dropdown ul li {
width: 100%;
}
.dropdown li:hover a {
background: #333;
}
.dropdown li a:focus,
.dropdown li a:hover {
background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul class="dropdown">
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
</ul>
</li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
<li><a href="#">Link 6</a>
</li>
<li><a href="#">Link 7</a>
</li>
<li><a href="#">Link 8</a>
</li>
</ul>
</li>
<li><a href="#">Link 5</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
</li>
<li><a href="#">Link 6</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
</li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
<li><a href="#">Link 6</a>
</li>
<li><a href="#">Link 7</a>
</li>
<li><a href="#">Link 8</a>
</li>
</ul>
</li>
</ul>
关于javascript - 如何使用 JavaScript 和 CSS 获得基于 div 的下拉菜单以获得滚动条而不是延伸到屏幕末尾? Struts也参与其中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30064868/