3

我试图让我的引导下拉菜单默认在 600 像素或小于 600 像素（移动设备）的屏幕上打开。

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

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

2 回答 2

2

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

<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>
于 2015-04-29T11:24:16.710 回答
0

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

    }
});
于 2014-04-21T17:59:19.287 回答