jQuery - 雙擊類顯示下拉選擇

-1

我對此有重大的麻煩。jQuery - 雙擊類顯示下拉選擇

我正在嘗試在jQuery中編寫一些內容，當文本被雙擊時它隱藏了該元素並顯示了一個選擇下拉菜單......但是，當用戶離開該元素時，下拉菜單應該返回到原始文本。

我已經嘗試了很多方法，但都沒有成功。我試着用懸停等方式使用dblclick。

在一個簡短的回顧中，用戶用文本點擊div。顯示Div是隱藏選擇。用戶鼠標離開區域，下拉隱藏，div再次顯示。

感謝您的幫助，我一直在玩這個太多的小時！

來源

2012-12-06 Nick McCally

你能告訴我們一些代碼和標記爲你迄今爲止嘗試過嗎？ –

請過帳一些代碼。另外，你真的確定要使用'雙擊'而不是'單擊'嗎？這在網絡應用中並不是一個好習慣，而且實施起來更加複雜。請參閱UX –

'$（'。orderOfferDrop'）。中的相關[問題]（http://ux.stackexchange.com/questions/7400/should-double-click-be-avoided-in-web-applications）。hide（）; （'）'）。（'[id]）。（''''）。hover（function（）{ \t \t var key = $（this）.attr（「id」）。split（「 - 」）[1] ; \t $（ '＃orderOfferDrop-' +鍵）.show（）; \t \t $（ '＃orderOfferStat-' +鍵）.hide（）; \t}，函數（）{ \t \t $（」（'。orderOfferDrop'）。hide（）; \t \t $（'。orderOfferStat'）。show（）; \t}）;' –

像這樣的東西不適合你嗎？

HTML：

<div> 
    <span>TEXT TEXT TEXT</span> 
    <select> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div>

CSS：

span { 
    cursor: default; 
} 

select { 
    display: none; 
}

JS：

$('div').dblclick(function() { 
    $('span').hide(); 
    $('select').show(); 
}).mouseleave(function() { 
    $('span').show(); 
    $('select').hide(); 
});

替代JS：

$('div').dblclick(function() { 
    $('span').hide(); 
    $('select').show(); 
}); 
$('select').mouseleave(function() { 
    $('span').show(); 
    $('select').hide(); 
});

當您移動到div的邊界之外時，第一個JS將使選擇框消失（由隱藏的span文本的大小設置）。第二種方法會讓選擇框消失，一旦你在裏面挖掘，然後將鼠標移出。如果你願意，你可以將它從.mouseleave（）改爲.change（），然後當有人實際選擇某件事物時，它只會隱藏選擇框。

JSFiddle

來源

2012-12-06 19:39:57 greg5green

jQuery - 雙擊類顯示下拉選擇

回答

相關問題