如何在 jquery + jquery mobile 中创建自定义下拉菜单

Question

您能告诉我如何在 jQuery mobile 中创建自定义下拉菜单吗？

我需要创建一个看起来像dropdown 的按钮，onclick 将显示一个包含列出选项的弹出 div。当用户选择一个选项时，弹出窗口将关闭并将按钮的值设置为所选项目。

我需要用 hacky 的方式做事。这是我知道的唯一方法。让它在所有平台上看起来都一样？

Answer 1

使用此代码：

JsFiddle demo.

HTML：

<a href="index.html" data-role="button" id="Click">DropDown</a>
<a href="#"  data-role="button" id="Drop">Click Here</a>
<div id="container">
<div id="fixed">
    <a href="#" name="test1">test1</a>
    <a href="#" name="test2">test2</a>
    <a href="#" name="test3">test3</a>
    <a href="#" name="test4">test4</a>
</div>
</div>

CSS：

#fixed{
    display:table;
    position:fixed;
    width:46%;
    height:46%;
    top:25%;
    left:25%;
    background:#fefefe;
    border:5px solid grey;
    border-radius:10px;
    padding:2%;
    z-index:2;
}
#container{
    position:fixed;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    top:0;
    display:none;
}

#fixed a{
    display:table-row;
    text-align:center;
}

jQuery:

$( "#Click" ).click(function() {
  alert( "Handler for .click() called." );
});
$( "#Drop" ).click(function() {
  $("#container").show();
});

$( "#container" ).click(function() {
  $("#container" ).hide();
});

$( "#fixed a" ).click(function() {
  document.getElementById('Drop').innerHTML=this.name;
});