Próbuję obsługiwać zdarzenia myszy i dotyku dla div, które chcę pokazać i ukryć. Moje zdarzenia dotyczące myszy działają dobrze, ale nie jestem pewien, jak to zrobić, aby działało na urządzeniu dotykowym (iPhone, iPad lub telefon z systemem Android).

Interakcja powinna polegać na tym, że gdy użytkownik kliknie lub dotknie spustu, pojawi się pole „szukaj”, a jeśli klikną / dotkną poza otwartym polem wyszukiwania LUB ponownie klikną / dotkną spustu, powinny się zamknąć (ukryć).

Oto mój 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>

I mój JavaScript (używając 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();
    };
});

Przykład pracy:http://jsfiddle.net/T5HMt/