Question

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

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

您可以通过执行以下操作来切换下拉列表：

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

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

Answer 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");
   }
});

要检测它是否可移动，我从此处复制了代码段：What is the best way to detect a mobile device in jQuery?

或者您也可以尝试使用此版本来定义特定页面宽度：

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

分辨率/移动设备上的Trigger Bootstrap 4下拉列表

1 个答案: