Toggle div on click or touch and hide on click/touch outside

Question

I\'m trying to support both mouse and touch events for a div that I want to show and hide. My mouse events work well, but I\'m not sure of how to get this to work on a touch-bas

Answer 1

http://jsfiddle.net/LYVQy/2/

I just included JQuery Mobile and changed your 'click' events into .on('tap',function(e))...

Jquery Mobile seems to treat 'tap' events as clicks on desktop browsers, so this seems suit your needs.

$searchTrigger.on("tap", function(e){
    e.preventDefault();
    e.stopPropagation();
    $searchBox.toggle();
});

$(document).on('tap',function(event){

if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
    $searchBox.hide();
};
});