如何在小于 600 像素的屏幕上的页面加载中“打开”引导下拉菜单

How to 'open' Bootstrap Dropdown menus on pageload on screens smaller than 600px

本文关键字：加载 打开 下拉菜单 小于 像素 屏幕      更新时间：2023-09-26

im 试图让我的引导下拉列表默认在小于 600px(移动(的屏幕上打开。

这似乎让它尝试，但看起来有些东西覆盖了它并再次关闭它：

<script type="text/javascript">
$(window).load(function () {
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
})
.load();
</script>

关于如何使这项工作的任何想法？

我可以用这个来调整大小，但我需要它来处理页面加载/文档准备好了。

<script type="text/javascript">
$(window).resize(function () {
    console.log('resize called');
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
})
.resize();
</script>

您可以通过触发多个事件将它们移动到同一处理程序中。

<script type="text/javascript">
$(window).on('load resize',function () {
    console.log('resize called');
    var width = $(window).width();
    if (width >= 0 && width <= 600) {
        $('#openBrowseMobile').addClass('open');
    }
    else {
        $('#openBrowseMobile').removeClass('open');
    }
});
</script>

我遇到了同样的问题，这是使用jQuery的另一种方法，它不涉及弄乱更少的代码或CSS。

我刚刚添加了一个触发器，以便在菜单打开后立即打开下拉菜单。

有一个超时，等待到主菜单打开。(在打开下拉列表之前会有 100 毫秒的延迟(，如果您喜欢它不要等待，我想可以更改更少。

$(".navbar-toggle").click(function() {         
    if (window.matchMedia("(max-width: 768px)").matches) {
        // on mobile, dropdown default opened:
        setTimeout(function() {
            $(".dropdown-toggle").click();
        }, 100);
    }
});
相关文章：