当你点击另一个元素时，你能触发一个jQuery UI选择菜单出现吗?

Question

我正在使用jQuery UI的selectmenu来为页面上的<select>元素设置样式。

默认情况下，它呈现一个<span>类.ui-selectmenu-button切换菜单。

但是，我想隐藏它，并使菜单在单击页面上的不同元素时显示/消失。

请问我该怎么做?

注意:菜单当前选择的值不需要在菜单出现之前是可见的，所以这不是问题。

Answer 1

考虑下面的例子:

$(function() {
$("#speed").selectmenu();
$(".next").click(function() {
$(".select-option").show();
$("#speed").selectmenu("open");
});
});

label {
display: block;
}
select {
width: 200px;
}
.hidden {
display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="car-type ui-widget">
<label for="car-name" class="ui-widget-header">Name your car:</label>
<input type="text" name="car-name" id="car-name" class="ui-widget-content"><button class="next btn i-priority-primary">Next</button>
<div class="select-option hidden">
<label for="speed" class="ui-widget-header">Select a speed:</label>
<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Medium" selected>Medium</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</div>
</div>