1

表示および非表示にする 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/

4

3 に答える 3

2

これで十分です: JsFiddle

$searchTrigger.on('click', function(e) {
    $searchBox.toggle();
    e.preventDefault();
});

画面とタッチデバイスで機能します。

于 2012-08-24T15:35:45.523 に答える
0

setOnClickListener次のようにイベントとオーバーライドonClick機能を使用することもできます。

btnclickme = (Button) findViewById(R.id.btn_clickme);
btnclickme.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                        // do your code here
            }
});
于 2012-08-24T15:41:36.017 に答える