Question

我真的很难过。有人可以帮忙吗？

我想为移动设备提供原生下拉菜单

http://jsfiddle.net/4UjVr/4/
文档：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>

我想为移动设备提供原生下拉菜单

Answer 1

这似乎可以解决问题。

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

Answer 2

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

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

<强> EDITED

在最底层，我添加了这个脚本，如果它是一个网页我添加了一些代码，以防止下拉菜单上的一些奇怪的点击事件。因为需要移除移动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>

Answer 3

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

<块引用>

这个类使选择与按钮具有相同的宽度和高度，将选择放在按钮上方（通过 z-index），然后将其隐藏将不透明度设置为 0。所以，它看起来像一个按钮，但是当你单击它，您实际上是单击了选择，从而打开了原生选择菜单。

~来自Comment on an Issue on Github

的直接引用

因为插件只是添加 CSS 以使选择上升到顶部以使其触发本机下拉列表，所以您可能添加的任何自定义 CSS 可能会覆盖插件的 CSS，例如更高的 {{1}在另一个元素上，就像我的情况一样。

删除任何自定义 CSS 将解决未出现本机下拉列表的进一步问题。

bootstrap-select下拉列表使其在移动设备上运行

3 个答案: