编辑选择

Question

这里是我的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'); 
       }); 
      }); 

Answer 1

我希望你可以使用此代码

$(your input box id or class).focusin(function() { 
    //your logic here 
    });