jQuery - 더블 클릭 클래스가 나타납니다. 드롭 다운을 선택하십시오.

Question

큰 문제가 있습니다.

jQuery에서 텍스트를 두 번 클릭하면 해당 요소가 숨겨지고 선택 드롭 다운이 표시됩니다. 그러나 사용자가 해당 요소를 떠날 때 드롭 다운은 원래 텍스트로 돌아갑니다. .

나는 많은 방법을 시도했지만 아무 것도 작동하지 않았습니다. hover 등을 사용하여 dblclick을 사용해 보았습니다.

짧은 요약하면 사용자가 div로 텍스트를 클릭합니다. div가 숨겨져있는 select가 표시됩니다. 사용자 마우스 영역을 남겨두고 드롭 다운을 숨기고 div가 다시 표시됩니다.

도움을 주셔서 감사합니다. 나는 이것을 너무 많은 시간 동안 놀았습니다!

Answer 1

이와 비슷한 기능이 작동하지 않습니까?

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

첫 번째 JS는 div 경계 (숨겨진 스팬 텍스트의 크기로 설정) 바깥으로 이동할 때 선택 상자를 사라지게합니다. 두 번째는 선택 상자가 안으로 들어가 마우스를 놓으면 사라집니다. 원하는 경우 .mouseleave()에서 .change()로 변경할 수 있습니다. 그러면 실제로 누군가가 무언가를 선택할 때 선택 상자 만 숨겨집니다.

JSFiddle