在點擊或觸摸時切換div並在點擊/觸摸時隱藏

我正試圖支持鼠標和觸摸事件，以便顯示和隱藏div。我的鼠標事件運行良好，但我不確定如何使其在基於觸摸的設備（iPhone，iPad或基於Android的手機）上運行。在點擊或觸摸時切換div並在點擊/觸摸時隱藏

交互應該是當用戶點擊或觸摸觸發器時，顯示「搜索」框，如果他們在打開的搜索框外單擊/觸摸或重新點擊/觸摸觸發器，它應該關閉（隱藏）。

這裏是我的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/

來源

2012-08-24 ctrlaltdel

這是不夠的：JsFiddle

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

它適用於屏幕和觸摸設備。

來源

2012-08-24 15:35:45

Andrea，謝謝。當點擊/觸摸事件發生在觸發器上時，這起作用。不過，當觸發事件發生在觸發器之外時，我也想隱藏搜索框。 – ctrlaltdel

您還可以使用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-24 15:41:36

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

我只是包括jQuery Mobile的，改變你的 'click' 事件到。對（ '水龍頭'，函數（e））...

Jquery Mobile似乎將點擊事件視爲點擊桌面瀏覽器，所以這似乎適合您的需求。

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

來源

2013-12-10 20:40:04 Brad

+1，如果你沒有jQuery Mobile，那麼添加觸摸事件（touchstart，touchend等）。先生，先生。 –

在點擊或觸摸時切換div並在點擊/觸摸時隱藏

回答

相關問題