Question

构建了一个简单的jsFiddle

它似乎不起作用。我有什么遗漏的吗？

<select name="filter" id="id_filter_log">
    <option value="" selected>-- Select Log Status --</option>
    <option value="logged">Logged Visit</option>
    <option value="login">Logged In</option>
    <option value="enabled">Enabled</option>
    <option value="disabled">Disabled</option>
</select>

$(document).ready(function () {
    $("#id_filter_log").selectmenu();
});

View in JSFiddle

Answer 1

<link rel="stylesheet" type="text/css" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" type="text/css"  href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

HTML

<select name="filter" id="id_filter_log">
    <option value="" selected>-- Select Log Status --</option>
    <option value="logged">Logged Visit</option>
    <option value="login">Logged In</option>
    <option value="enabled">Enabled</option>
    <option value="disabled">Disabled</option>
</select>

JS

$(document).ready(function () {
    $("#id_filter_log").selectmenu();
});

view in JSFIDDLE

Answer 2

您很可能从1.10或更早版本导入jQuery-UI css。在UI 1.11中添加了Selectmenu，并且不支持使用不同版本的css，并且可能没有.ui-selectmenu-open之类的样式，因此出现故障而不是关闭。

Answer 3

以下是三个完整的css选择器，可以让它再次工作。

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.ui-selectmenu-open {
    display: block;
}
.ui-selectmenu-button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

JQuery selectmenu（）不起作用

3 个答案: