我有 3 个按钮，每个按钮都会触发自己的下拉内容 div。我需要下拉列表来跨越页面的整个宽度。我知道我可以将下拉菜单的位置更改为 :absolute 以实现全宽，但这会导致问题，因为它会将自身定位在页脚上方而不是将其向下推。
这可能是我的 css 中缺少的一些基本内容，但我花了几个小时尝试调试它，但我没有运气。
我在评论里设置了codepen
如有任何帮助，我们将不胜感激。
最佳答案
如果你想让它在不使用 position: absolute 的情况下工作，你将不得不稍微更改 html 标记。
您必须将所有 .toggleContent div 移出 li，因为当您尝试将它们填满时宽度 它们受 li 宽度的限制(您在示例中使用的是 100%)。您可以将 div 移动到任何您喜欢的地方。
现在您还必须更改 jQuery 事件，因为它们依赖于标记才能工作。您只需更改前几行即可使用:
$("button.expand").click(function(e){
e.preventDefault();
$(this).toggleClass("active");
$('.toggleContent').slideToggle('slow');
return false;
});
这是全部完成后的样子:example .
关于javascript - 下拉相对定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35640207/