개발하다가 이런 수요상황이 생겨서 나중에 참고하려고 녹화해두었습니다
요구사항 배경
페이지에 있는 단축키 단축키를 이용해 결제수단을 찾아보세요 선택 상자(드롭다운 목록)를 선택하고 선택합니다.
기술적 어려움
현재 브라우저는 코드를 통해 드롭다운 목록 위치를 지정하여 그 아래의 모든 옵션을 나열하는 것을 지원하지 않습니다. 마우스로만 클릭할 수 있습니다. .
인터넷에서 정보를 검색한 후 더 나은 처리 방법을 생각해냈습니다.
select의 size 속성과 box 레이아웃의 position 속성을 사용하여 구현합니다. 구체적인 코드는 다음과 같습니다.
결제 방법:
| >
| 확장 및 확장 해제 방법은 모두 간단합니다.
function Expand(obj){
$(obj).attr("size","10")
}
function unexpand(obj){
$(obj ).attr("size","1")
}
선택 위치를 절대값으로 설정 DOM의 흐름 레이아웃에 영향을 미치지 않도록 합니다. 그런 다음 선택 항목이 해당 컨테이너에 따라 배치되도록 해당 컨테이너의 위치를 상대 위치로 설정합니다.
여기서 주목해야 할 점은 w3c의 CSS 표준에 따르면 테이블 관련 요소에 position:relative 설정이 정의되어 있지 않기 때문에 div를 테이블 요소의 선택 컨테이너로 사용해야 한다는 것입니다. 선택 요소는 본문 요소를 기반으로 직접 위치를 지정합니다.
참고정보 :
http://www.php-insite.com/autoexpand_select.html 페이지 소스코드 바로보기
http://bbs.csdn.net/topics /330158935 lingshuo1993의 답변에 주목하세요
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
