在分辨率/移动设备上触发 Bootstrap 4 下拉菜单答案

【问题标题】：Trigger Bootstrap 4 dropdown on resolution/mobile在分辨率/移动设备上触发 Bootstrap 4 下拉菜单
【发布时间】：2017-09-14 04:07:25
【问题描述】：

我有一个带有一些链接的标题。当标题足够短时，它会进入移动视图（折叠样式）。

我希望最初显示下拉菜单，但可以切换为隐藏并像往常一样再次显示。基本上我想要的是：当页面加载/调整大小并且导航栏进入移动设备时，切换下拉菜单使其可见。

您可以通过以下方式切换下拉菜单：

$("#element").dropdown("toggle");

在这里玩我的例子：https://codepen.io/anon/pen/ZKbJJV

【问题讨论】：

如果有人能告诉我他们为什么投反对票，那就太好了。谢谢。

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

更新：

$(document).ready(function() {
    $(window).resize(function() {
        if($(window).width()<=768) {
            $("#element").removeClass("dropdown-menu");
        }else{
          $("#element").addClass("dropdown-menu");
        }
    });
    if($(window).width()<=768) {
      $("#element").removeClass("dropdown-menu");
    }else{
      $("#element").addClass("dropdown-menu");
    }
});

现在我再次尝试了删除和添加类，它可以工作。 http://codepen.io/julianschmuckli/pen/ybYzQe

页面加载完成后，您可以执行代码：

$(document).ready(function() {
   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     $("#element").dropdown("toggle");
   }
});

为了检测它是否是移动的，我从这里复制了 sn-p：What is the best way to detect a mobile device in jQuery?

或者你也可以试试这个版本，用特定的页面宽度来定义它：

$(document).ready(function() {
    if($(window).width()<=768) {
        $("#element").dropdown("toggle");
    }
});

【讨论】：

1) 我不想只在手机上做。 2）如果我调整大小会发生什么？那就不会触发了。 3）如果我调整大小并显示下拉菜单，然后我再次调整大小以使其再次切换，会发生什么情况？它会隐藏它。抱歉，但它需要的不仅仅是切换它。
没有冒犯之意，但你真的在尝试吗？我为您提供了一个 codepen 链接，但您正在做的事情不起作用。如果您认为这是如何工作的，它将为您在 768 下调整大小的每个像素运行切换代码。如果您正在调整窗口大小，它实际上会切换数百次。
@MortenMoulder 我再次用新代码更新了我的答案。
"我希望最初显示下拉菜单，但可以切换为像平常一样隐藏和再次显示"