javascript - jQuery-UI 在单击时向右滑动 div

Question

我有一个输入搜索字段和一个 div，其中 div 是一个表格，我可以使用输入搜索字段进行搜索；

$(document).on("click", '#zoekenbtn', function (event) {
    $("#zoekenpanel").toggle('slide', { direction: 'left' });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="&#128270"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
    <table class="zoektable">
        <tr id="myhead">
            <th>
                Klant
            </th>
            <th>
                Locatie
            </th>
            <th>
                Plaats
            </th>
        </tr>
        @foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
        {
            <tr name="sysinfo" itemscope itemid="@temp.Id" class="info" data-url="@Url.Action("searchresult", "Klanten", new { id = temp.Id})">
                <td>
                    @temp.Klant
                </td>
                <td>
                    @temp.Locatie
                </td>
                <td>
                    @temp.Plaats
                </td>
            </tr>
        }
    </table>
</div>

<input id="zoekenbtn" type="search" placeholder="&#128270"/>

但这会导致一个问题；如果您单击输入并单击其他位置。您不再专注于输入，因此您无法再输入。因此您必须再次单击它才能输入。这会再次切换 div 并将其关闭。

我需要一种方法，使其不会切换，而是从左向右滑动打开。

谢谢:)

Answer 1

添加

$(document).keypress(function() {
   $("#zoekenbtn").focus(); 
});

它将捕获您的输入字段中的击键和焦点

$(document).on("click", '#zoekenbtn', function (event) {
    $("#zoekenpanel").toggle('slide', { direction: 'left' });
  
});
$(document).keypress(function() {
   $("#zoekenbtn").focus(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="&#128270"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
    <table class="zoektable">
        <tr id="myhead">
            <th>
                Klant
            </th>
            <th>
                Locatie
            </th>
            <th>
                Plaats
            </th>
        </tr>
        @foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
        {
            <tr name="sysinfo" itemscope itemid="@temp.Id" class="info" data-url="@Url.Action("searchresult", "Klanten", new { id = temp.Id})">
                <td>
                    @temp.Klant
                </td>
                <td>
                    @temp.Locatie
                </td>
                <td>
                    @temp.Plaats
                </td>
            </tr>
        }
    </table>
</div>