Переключение div при нажатии или касании и скрытие при нажатии / касании снаружи
Я пытаюсь поддерживать события мыши и касания для div, который я хочу показать и скрыть. Мои события мыши работают хорошо, но я не уверен, как заставить это работать на сенсорном устройстве (iPhone, iPad или телефон на базе Android).
Взаимодействие должно состоять в том, что когда пользователь нажимает или касается триггера, «поиск» отображается окно, и если они щелкают / касаются за пределами открытого окна поиска ИЛИ повторно щелкают / касаются триггера, оно должно закрываться (скрываться).
Вот мой HTML:
<div id="search">
<div class="search-link">
<a href="#search" class="search-nav-button" id="search-trigger">Search</a>
</div>
<div class="search-box">
<form action="/search" id="search_form">
<input placeholder="Search" type="text" />
<input id="search-submit" type="submit" value="Submit" />
</form>
</div>
</div>
И мой JavaScript (с использованием jQuery):
var $searchBox = $('#search .search-box');
var $searchTrigger = $('#search-trigger');
$searchTrigger.on("click", function(e){
e.preventDefault();
e.stopPropagation();
$searchBox.toggle();
});
$(document).click(function(event){
if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
$searchBox.hide();
};
});
Рабочий пример:http://jsfiddle.net/T5HMt/