如何是弹出的页面中的Bootstrap的时间控件下拉式向上弹

Question

增加时向上弹出呀！

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要实现一个向下或向上弹出的 Bootstrap 时间选择器，你需要使用 Bootstrap 的 dropdown-toggle 类。这个类在点击按钮后会触发一个事件，使元素向上移动到其父元素的底部。

以下是一个简单的示例：

HTML:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="myDropdown" data-toggle="dropdown">
        选择日期
    </button>
    <ul class="dropdown-menu" aria-labelledby="myDropdown">
        <!-- 这里添加你的选项 -->
    </ul>
</div>

CSS:

.dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f9f9f9;
    border: none;
}

JavaScript:

document.getElementById('myDropdown').addEventListener('click', function() {
    var dropdown = this.querySelector('.dropdown-menu');
    if (dropdown) {
        dropdown.classList.toggle('show');
    }
});

在这个例子中，我们首先创建了一个有下拉菜单的按钮，并为它设置了 data-toggle="dropdown" 属性。然后，在 JavaScript 中，当用户点击按钮时，我们将 .dropdown-menu 类添加到当前元素上，使其变为可见。这将导致下拉菜单向上移动到其父元素的顶部。

如果你想要让下拉菜单向下移动，你可以稍微调整一下 CSS。例如，你可以在 .dropdown-menu 样式中添加 position: sticky; top: -100%; 或者设置 top: auto 和 bottom: auto。