아름다운 선택 드롭다운 메뉴를 만들기 위해 CSS와 결합된 jQuery

양식을 디자인할 때 선택 드롭다운 옵션 컨트롤을 사용해야 할 수도 있습니다. 안타깝게도 IE 브라우저의 기본 선택 컨트롤은 모양이 매우 보기 흉하고 스타일로 제어할 수 없으며 이미지 및 기타 정보를 제어할 수 없습니다. 옵션에 추가되었습니다. 오늘은 CSS와 jQuery를 사용하여 아름다운 드롭다운 옵션 메뉴를 만드는 방법을 예제를 통해 설명하겠습니다.

XHTML

请选择城市长沙北京南京堪培拉多伦多

보시다시피 div를 사용하여 드롭다운 옵션 컨트롤의 기본 선택 태그를 대체합니다.
CSS

#dropdown{width:186px; margin:80px auto; position:relative} 
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; 
border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px; 
color:#807a62; cursor:pointer} 
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; 
position:absolute; display:none} 
#dropdown ul li{height:24px; line-height:24px; text-indent:10px} 
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none} 
#dropdown ul li a:hover{background:#c6dbfc; color:#369}

CSS의 배경색과 글꼴 색상은 물론 임의로 정의된 스타일까지 수정할 수 있습니다. 첨부 파일에 포함된 드롭다운 화살표가 있는 작은 아이콘이 있습니다.
jQuery
먼저 "도시를 선택하세요"를 클릭하면 드롭다운 레이어 "ul"이 표시되는지 확인하고, 그렇지 않으면 드롭다운 옵션을 엽니다(아래로 슬라이드). -down 옵션

$("#dropdown p").click(function(){ 
  var ul = $("#dropdown ul"); 
  if(ul.css("display")=="none"){ 
    ul.slideDown("fast"); 
  }else{ 
    ul.slideUp("fast"); 
  } 
});

그런 다음 드롭다운 옵션을 클릭하면 옵션 내용을 가져오고 옵션 내용을

태그에 씁니다. 을 클릭하고 드롭다운 옵션을 숨깁니다.

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  $("#dropdown ul").hide(); 
});

이렇게 하면 간단한 드롭다운 옵션 작업이 완료되는데, 엄청 간단하지 않나요?
물론 배경과 상호작용할 때 옵션의 값을 얻어야 한다면 먼저 XHTML을 정의해야 합니다.

请选择城市长沙北京南京堪培拉多伦多

코드에서 볼 수 있듯이 a 태그에 rel 속성을 추가하고 값을 할당하는 것은 select의 옵션 태그 값과 동일합니다. . 다음 단계는 jQuery를 통해 rel 값을 가져오는 것입니다.

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  var value = $(this).attr("rel"); 
  $("#dropdown ul").hide(); 
  $("#result").html("您选择了"+txt+"，值为："+value); 
});

코드를 참조하세요. 이로써 완전한 드롭다운 옵션 작업이 완료됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼