我正在尝试创建一个过滤器下拉列表，其中最初只显示下拉列表的标签，然后在点击标签时，选项列表将下拉到其余内容的顶部（使用{ {1}}定位）。我正在努力解决的部分是将absolute定位范围和绝对定位列表都包含在一个容器中，这样两者都在边框内，并且当绝对定位的菜单向下滑动时边框会扩展。以下是我尝试过的，因为你可以看到它有点不稳定（内容跳跃）并且边界不合适。不确定这是否是正确的方法，对如何改善外观/功能的想法持开放态度：
relative$(function() {
$('.dropdown span').click(function() {
$(this).parent().toggleClass('open');
$(this).next('ul').slideToggle();
});
});.container {
width:400px;
}
.dropdown {
position:relative;
border:1px solid black;
}
.dropdown.open {
border-bottom:none;
}
.dropdown span {
display:block;
padding:10px 15px;
}
.dropdown ul {
display:block;
background:#fff;
width:100%;
list-style-type:none;
padding:0 0 15px;
margin:0;
border:1px solid black;
border-top:none;
position:absolute;
z-index:10;
display:none;
}
.dropdown ul > li {
padding:15px 15px 0;
}
.dropdown ul > li:first-child {
padding-top:0;
}
答案 0 :(得分：2)
到目前为止做得很好。唯一遗漏的细节是：
margin-left: -1px;上的<ul> 1px将border: 1px solid transparent .dropdown.open上1px，以防止页面的其余部分向上移动$(function() {
$('.dropdown span').click(function() {
$(this).parent().toggleClass('open');
$(this).next('ul').slideToggle();
});
$(window).on('click', function(e) {
if (!$(e.target).closest('.dropdown').is('.dropdown')
|| $(e.target).closest('li').is('.dropdown li')
) {
$('.dropdown.open span').trigger('click')
}
})
});。
.container {
width: 400px;
}
.dropdown {
position: relative;
border: 1px solid black;
}
.dropdown.open {
border-bottom: none;
}
.dropdown span {
display: block;
padding: 10px 15px;
}
.dropdown ul {
display: block;
background: #fff;
width: 100%;
list-style-type: none;
padding: 0 0 15px;
margin: 0;
border: 1px solid black;
border-top: none;
position: absolute;
z-index: 10;
display: none;
margin-left: -1px;
}
.dropdown ul>li {
padding: 15px 15px 0;
}
.dropdown ul>li:first-child {
padding-top: 0;
}
.dropdown.open {
border-bottom: 1px solid transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<span>Label</span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel tellus sit amet diam sagittis tempor. Nullam sed nunc non ipsum rhoncus tincidunt. Ut odio nisi, convallis et augue vitae, dictum semper mauris. Donec ullamcorper vehicula mi in interdum.
Cras at hendrerit dolor, a scelerisque arcu. Nullam sagittis consectetur hendrerit. Donec interdum gravida tincidunt. Morbi id sem eleifend, gravida urna sit amet, vestibulum nibh. Pellentesque non convallis massa. Vivamus non metus lobortis, condimentum
lorem vitae, semper augue. Ut eget ante eget orci elementum sodales. Donec nec ligula mauris.</p>
<p>Nunc a consectetur nulla, vel viverra velit. Maecenas sagittis velit turpis, eu dapibus turpis blandit vitae. Duis mollis, lorem ac consectetur hendrerit, turpis odio lacinia eros, sed lacinia velit justo in est. Integer non mauris lacinia, sagittis
justo sed, accumsan tortor. Suspendisse a commodo tortor. Etiam tincidunt mi sit amet elementum fringilla. Pellentesque luctus ac leo non lobortis. Morbi iaculis consequat lacus eget tristique. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Vivamus ultrices congue augue, vel consequat velit viverra sed. Sed a finibus velit. Mauris sed orci lectus. Vivamus bibendum ante et quam volutpat, sed venenatis mi dignissim. Ut tempus iaculis faucibus.</p>
</div>.dropdown
注意：我也冒昧地为你的JavaScript添加一个小的关闭函数，用于点击position: absolute;外部或其中一个选项，因为你的点击时只会关闭标签
答案 1 :(得分：1)
我做了一些改变让它发挥作用。我在所有元素中添加了box-sizing:border-box，因此我知道我们正在处理带边框的一致宽度。请注意绝对定位项的边框如何都在父边框的内部。如果将边框的宽度添加到子项的宽度，则边框按它们之间的距离排列width: calc(100% + 2px)，您只需要将绝对定位偏移到left: -1px。不同的浏览器可能会在这里使用负值，因此您可以使用transform: translateX(-1px)代替。
$(function() {
$('.dropdown span').click(function() {
$(this).parent().toggleClass('open');
$(this).next('ul').slideToggle();
});
});* {
box-sizing: border-box
}
.container {
width:400px;
}
.dropdown {
position:relative;
border:1px solid black;
}
.dropdown.open {
border-bottom:none;
}
.dropdown span {
display:block;
padding:10px 15px;
}
.dropdown ul {
display:block;
background:#fff;
width: calc(100% + 2px);
list-style-type:none;
padding:0 0 15px;
margin:0;
border:1px solid black;
border-top:none;
position:absolute;
z-index:10;
display:none;
left: 0;
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
}
.dropdown ul > li {
padding:15px 15px 0;
width: 100%;
}
.dropdown ul > li:first-child {
padding-top:0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<span>Label</span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div>
<div class="body-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel tellus sit amet diam sagittis tempor. Nullam sed nunc non ipsum rhoncus tincidunt. Ut odio nisi, convallis et augue vitae, dictum semper mauris. Donec ullamcorper vehicula mi in interdum. Cras at hendrerit dolor, a scelerisque arcu. Nullam sagittis consectetur hendrerit. Donec interdum gravida tincidunt. Morbi id sem eleifend, gravida urna sit amet, vestibulum nibh. Pellentesque non convallis massa. Vivamus non metus lobortis, condimentum lorem vitae, semper augue. Ut eget ante eget orci elementum sodales. Donec nec ligula mauris.</p>
<p>Nunc a consectetur nulla, vel viverra velit. Maecenas sagittis velit turpis, eu dapibus turpis blandit vitae. Duis mollis, lorem ac consectetur hendrerit, turpis odio lacinia eros, sed lacinia velit justo in est. Integer non mauris lacinia, sagittis justo sed, accumsan tortor. Suspendisse a commodo tortor. Etiam tincidunt mi sit amet elementum fringilla. Pellentesque luctus ac leo non lobortis. Morbi iaculis consequat lacus eget tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ultrices congue augue, vel consequat velit viverra sed. Sed a finibus velit. Mauris sed orci lectus. Vivamus bibendum ante et quam volutpat, sed venenatis mi dignissim. Ut tempus iaculis faucibus.</p>
</div>