скрыть элемент при нажатии в любом месте на странице и показать его, нажав на другой элемент - PullRequest
Новая
       12

скрыть элемент при нажатии в любом месте на странице и показать его, нажав на другой элемент

0 голосов
/ 19 февраля 2012

У меня есть входной текст, который я использовал для быстрого поиска, под этим входом есть div, который я использую, чтобы показать результат поиска.при вводе ввода результат отображается в файле div.now. Я хочу скрывать этот элемент (имеется в виду div) всякий раз, когда я нажимаю на окно и показываю его снова, нажимая на вход.не мог показать это снова.

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

Ответы [ 2 ]

2 голосов
/ 19 февраля 2012

Вы должны использовать триггер событий blur() и focus() в jQuery. документ 

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

Измените #input_window на что угодно в вашем HTML-коде.

1 голос
/ 19 февраля 2012

Я не уверен, что существует событие click для объекта "window".Но я не эксперт в 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>
...