Question

我有一个用于快速搜索的输入文本，在此输入下有一个div用于显示搜索结果。通过输入输入，结果显示在div.now我想隐藏这个元素（意思是div）每当我点击窗口并通过点击输入再次显示它。我尝试了几个jquery代码隐藏元素但我无法再显示出来。

$(window).click(function () {
    $('#livesearch').hide();
});
$('#search').click(function () {
    $('#livesearch').show();
});

Answer 1

您应该使用jQuery的blur()和focus()事件触发器。 doc

$('#input_window').blur(function () {
  $('#livesearch').hide();
}).focus(function () {
  $('#livesearch').show();
});

将#input_window更改为html代码中的任何内容。

Answer 2

我不确定“window”对象是否存在click事件。但是我不是JS的专家。

请检查此代码，我认为它会以一种不同的方式实现您想要实现的目标。

编辑：请检查此代码。如果单击它们，这可以防止隐藏搜索结果。由于我已经在研究JQuery，我花了很多时间来试验这个，实现这个功能感觉比它应该更复杂：）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $(':not(.search_result)').focus(function () {
            $('#livesearch').hide();
        });
        $('#search').focus(function () {
            $('#livesearch').show();
        });
    });
</script>
</head>
<body>
<div>
    <input id='search' type="text" />
    <div id='livesearch' style='display: none'>
        <ul>
            <li><a class='search_result' href='#'>result#1</a></li>
            <li><a class='search_result' href='#'>result#2</a></li>
        </ul>
    </div>
</div>
<div>
    The rest of the page.
</div>
</body>
</html>

单击页面上任意位置时隐藏元素，并通过单击其他元素显示它

2 个答案: