Question

我试图让我的引导下拉列表在默认情况下在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>

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

我可以使用它来调整大小，但我需要它来处理pageload / doc ...

<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>

Answer 1

我有同样的问题，这是另一种使用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);

    }
});

如何在小于600px的屏幕上“打开”页面加载时的Bootstrap Dropdown菜单

1 个答案: