编辑选择
问题描述:
这里是我的HTML代码:编辑选择
<div class="editable-select-holder">
<input type="text" name="position" id="position" value="${userInfoForm.position}">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<c:forEach var="position" items="${positions}">
<li>${position.description}</li>
</c:forEach>
</ul>
</div>
,这是jQuery的:
$(document).on('click', '.editable-select-expander', function() {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
我想exand列表当我点击按钮或重点投入。我上面提供的代码只适用于按钮点击。在焦点事件上我也需要相同的逻辑。有什么建议么?
像这样改变,但仍然无法正常工作。
$(document).on("click",'.editable-select-holder', function() {
var $holder = $(this);
$holder.on('click','.editable-select-expander', function() {
$holder.toggleClass('editable-select-expanded');
});
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
$holder.on('focus', 'input', function() {
$holder.addClass('editable-select-expanded');
});
});
答
我希望你可以使用此代码
$(your input box id or class).focusin(function() {
//your logic here
});
添加'tabindex'属性所有'li's,以使它们可成为焦点。 – Teemu