Question

我有一个输入搜索字段和一个div，其中div是一个我可以使用输入搜索字段搜索的表;

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

但这会导致问题;如果单击输入并单击其他位置。你不再专注于输入，因此你不能再输入它了。所以你必须再次点击它才能输入。再次切换div并关闭它。

我需要一种方法，以便它不会切换，但从左到右滑动。

谢谢：）

Answer 1

添加

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

它会捕获按键并将焦点放在输入字段

中

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我找到了我想要的东西，我成功地添加了

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

这样，当面板打开时，slideToggle不会切换：）

jQuery-UI幻灯片右击onClick

2 个答案: