6

我真的很难做到这一点。有人可以帮忙吗？

我想为移动设备启用本机下拉菜单

  1. http://jsfiddle.net/4UjVr/4/

  2. 文档：http ://silviomoreto.github.io/bootstrap-select/#mobile 

$(function() {
  $('#desktop').selectpicker({
    container: 'body'
  });
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />


<select id="desktop" data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option>cow</option>
  <option>Test2</option>
  <option>Tes3</option>
  <option>Tes4</option>

  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>

我想为移动设备启用本机下拉菜单

4

3 回答 3

11

这似乎可以解决问题。

$(function () {
$('#desktop').selectpicker({
    container: 'body'   
});

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('#desktop').selectpicker('mobile');
}
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />


<select id="desktop" data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option>cow</option>
  <option>Test2</option>
  <option>Tes3</option>
  <option>Tes4</option>

  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>

于 2015-01-28T22:35:18.507 回答
1

如果你们想知道这里发生了什么，这就是实际需要的。

<script>
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
                $('.selectpicker').selectpicker('mobile');
            }
            else {
                $('.selectpicker').selectpicker({});
            }
</script>

并在 html

<select class="selectpicker mobile-device"></select>

已编辑

如果它是一个网页，我在最底部添加了这个脚本，我添加了一些代码来防止下拉菜单上出现一些奇怪的点击事件。因为需要移除移动 css 类以获得更好的外观。

<script>
                if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))) {
                    var elements = document.querySelectorAll('.mobile-device'); 
                    for(var i = 0; i < elements.length; i++)
                    {
                        elements[i].classList.remove('mobile-device');
                    }
                }      
</script>
于 2018-02-20T18:01:22.437 回答
0

对于从 Google 来到这里的任何人，值得注意的是，当启用移动选项时，mobile-device该类会自动添加到。<select>

此类使选择与按钮具有相同的宽度和高度，将选择置于按钮上方（通过 z-index），然后通过将不透明度设置为 0 来隐藏它。因此，它看起来像一个按钮，但是当您单击时在它上面，您实际上是在单击选择，从而打开本机选择菜单。

~ 直接引用Github 上一个问题的评论

因为插件只是添加 CSS 以使选择上升到顶部以使其触发本机下拉菜单，因此您可能添加的任何自定义 CSS 都可能覆盖插件的 CSS，例如z-index另一个元素上的更高，因为它是就我而言。

删除任何自定义 CSS 将解决原生下拉菜单不出现的进一步问题。

于 2021-08-12T01:49:22.153 回答