Question

我正在处理一些旧代码，我遇到了一个有点令人费解的问题。我有一个下拉列表，里面有大约5个项目。如果列表正确打开的区域一切正常（打开现有内容的弹出窗口）。但是当没有（由于屏幕大小/方向）时，我会显示列表，但背景为黑色。有没有办法强制列表打开，就好像第一个选项中有空格一样？

<div  style="font-size: smaller">
   @Html.DropDownListFor(m => m.SelectedContext, new SelectList(Model.Contexts, "ContextID", "Label")
    , new { id = "select-choice-1", @class = "contextmenu", data_theme="c" , name = "select-choice-1", data_native_menu="false" })
</div>

使用jquery 1.8.3和mobile 1.3.2

编辑：当出现问题的情况时，我可以看到下面的元素神奇地出现。

<div data-role="dialog" id="select-choice-1-dialog" data-theme="c" data-overlay-theme="a" tabindex="0" class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" data-url="select-choice-1-dialog" style="min-height: 190px;">
<div role="dialog" class="ui-dialog-contain ui-overlay-shadow ui-corner-all">
...

Answer 1

希望我理解你的问题......

不幸的是，这种行为是内置的jquery移动框架。当项目数大于屏幕大小时，它会打开一个新页面，用于显示所有项目。

您可以阅读此here！

从doc（上面的链接）中提取

当设备屏幕上显示的选项太多时，框架会自动创建一个新的“页面”，其中填充了选项的标准列表视图。这允许我们使用原生滚动包含在设备上以通过长列表移动。该标签内的文字用作此页面的标题。

在我的情况下，我避免使用自定义下拉列表，并使用设备中的本机。如果要设置本机，只需更改data-native-menu ='true'

data_native_menu="true"

希望有所帮助，

Answer 2

感谢MartinOnTheNet的伟大指导。

问题是由于脚本上的.live（）函数使用此div因某种原因造成混淆。将页面上的所有.live（）更改为.on（）函数。像下面的东西;

$(#pageDiv).live('pagecreate', function (event) {
    $(".contextmenu").change(function () {
    ...

到

$(document).on('pagecreate','#pageDiv', function (event) {
    $(".contextmenu").change(function () {
    ...

还使用 allowSamePageTransition：true ，如下所示。 $ .mobile.navigate也有效但后来我失去了后面的功能。

$.mobile.changePage("../Controller/Action?ItemID=" + $("#select-choice-1").attr("value"),
{
   allowSamePageTransition: true
});

什么不起作用;

强迫定位。
强制屏幕尺寸大于下拉列表
列表大小摆弄叠加属性将事件添加到
用live或bind（.live("ready"...，...）
$(#pageDiv).die()杀死所有绑定事件
还有一些被遗忘的奇怪的编码实验

下拉列表在小屏幕/不同方向时的尴尬行为

2 个答案: