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

Posted 2023-03-31

【中文标题】如何在小于 600 像素的屏幕上“打开”页面加载时的 Bootstrap 下拉菜单

【英文标题】：How to 'open' Bootstrap Dropdown menus on pageload on screens smaller than 600px

【发布时间】：2013-09-29 20:08:20

【问题描述】：

我试图让我的引导下拉菜单默认在 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>

【问题讨论】：

如果有东西覆盖了你的脚本代码。尝试将您的脚本移到引导脚本代码下方。

此解决方案可能会有所帮助：[在此处输入链接描述][1] [1]：***.com/questions/18939015/…

【参考方案1】：

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

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

【参考方案2】：

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

    
);