Question

我正在开发一个JQueryMobile页面。此页面将包含带有自定义菜单的选择元素（下拉列表）。我试图将菜单放在选择按钮的正下方，并将其宽度更改为选择按钮的宽度。进一步的风格化也将随之而来。

在Firebug中，我发现JQM更改了选择菜单的CSS类（此处为：select-choice-1-listbox-popup）及其位置属性。我认为这可能是获取此元素并简单地更改top属性的正确方法。但这不起作用。我想我的代码执行得太早，因为第一个警报没有显示“top”属性的值。

<script type="text/javascript">
    function positionMenu() {
        alert(document.getElementById('select-choice-1-listbox-popup').style.top); // prints ""
        document.getElementById('select-choice-1-listbox-popup').style.top="300px";
        alert(document.getElementById('select-choice-1-listbox-popup').style.top); // prints "300px"
    }
</script>

[...]

<div onClick="positionMenu();"  data-role="fieldcontain" style="width:300px;">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select data-native-menu=false name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

我的问题是：如何更改选择菜单的属性？

JQueryMobile - 选择菜单的位置和大小

0 个答案: