如何始终在触发器下方显示下拉菜单

Posted

技术标签:

【中文标题】如何始终在触发器下方显示下拉菜单【英文标题】:How to always show dropdown below the trigger 【发布时间】:2022-01-17 22:53:15 【问题描述】:

使用materializecss,我有这个代码:

<a class='dropdown-trigger-courseForm filterButton' href='#' data-target='dropdown1'>Drop Me!<i class="fa fa-angle-down filter"></i></a>
<ul id='dropdown1' class='dropdown-content'>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
<li><label><input type="checkbox" /><span>Test</span></label></li>
</ul>

还有这个 jquery:

 $('.dropdown-trigger-courseForm').dropdown(
    coverTrigger: false,
    closeOnClick: false
  );

我想要的是在触发器下方显示下拉列表始终,而不仅仅是在视口上有足够空间时。

【问题讨论】:

【参考方案1】:

我正在使用的 materializecss 版本似乎存在高度计算错误或“不良行为”。我只是直接在materializecss javascript文件中更改了javascipt中的高度,它现在可以按我想要的方式工作。

【讨论】:

以上是关于如何始终在触发器下方显示下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

Jquery下拉菜单单击始终打开

如何重新创建 TweetBot 样式的“下拉”单元格菜单?

如何在从下拉菜单中进行选择后显示复选框列表,具体取决于下拉菜单选择?

菜单和下拉菜单之间的空间

iPad横向模式下的下拉菜单触发

导航下拉菜单显示太左