单击或触摸时切换div并在外部单击/触摸时隐藏 [英] Toggle div on click or touch and hide on click/touch outside

问题描述

我正在尝试为我要显示和隐藏的div支持鼠标和触摸事件。我的鼠标事件运作良好，但我不确定如何在基于触摸的设备（iPhone，iPad或基于Android的手机）上使用它。

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-based device (iPhone, iPad or Android-based phone).

交互应该是当用户点击或触摸触发器时，会显示搜索框，如果他们在打开的搜索框外单击/触摸或重新单击/触摸触发器，则应关闭（隐藏） 。

The interaction should be that when a user clicks or touches the trigger, the "search" box is shown, and if they click/touch outside of the opened search box OR re-click/touch the trigger, it should close (hide).

这是我的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）：

And, my JavaScript (using 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/

推荐答案

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

我只是包括JQuery Mobile并将你的点击事件更改为.on（'点击'，功能（e））......

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

Jquery Mobile似乎对待'点击'事件作为点击桌面浏览器，所以这似乎符合您的需求。

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();
};
});

这篇关于单击或触摸时切换div并在外部单击/触摸时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！