정렬되지 않은 목록을 드롭다운 메뉴로 만들기
워드프레스에 이 코드가 표시되면 점프 메뉴로 전환하는 가장 쉬운 방법은 무엇입니까?
<ul class='toc-odd level-1'>
<li><a href="1">It's finally here</a></li>
<li><a href="2">Improvements</a></li>
<li><a href="3">Handling</a></li>
</ul>
이 스레드에 표시된 것처럼 jquery를 사용할 수 있습니까?jquery를 사용하여 정렬되지 않은 목록을 멋진 스타일의 <선택> 드롭다운으로 변환하는 방법은 무엇입니까?
그리고 만약 그렇다면, 제가 그 게시물에 표시된 코드 예제를 어디에 놓을까요?
예를 들어, jQuery를 처음 사용하는 경우 HTML 웹 페이지 내의 스크립트 태그를 사용하여 인라인 jQuery를 만들거나 CDN(여기서 확인)을 사용하여 HTML 파일(기본 설정)에 연결된 별도의 .js 파일을 만들거나 스크립트 문서 파일을 직접 제공할 수 있습니다.Google의 CDN을 사용하는 것을 선호합니다. 클라이언트에 더 가까운 서버가 많고 클라이언트는 CDN을 통해 스크립트를 한 번만 로드하면 되기 때문입니다.
HTML에서 스크립트 태그를 제공한 다음 JavaScript 및 jQuery로 작업을 시작합니다!
<head>
<title>your webpage</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
//BELOW IS YOUR OWN SCRIPT FILE REFERENCE!
<script src="Scripts/Jscript1.js" type="text/javascript" ></script>
또한 스크립트 파일에서 jQuery IntelliSense를 사용하려면 사용 중인 스크립트 파일에 참조 링크를 추가하기만 하면 됩니다!
/// <reference path="jquery-1.7.1-vsdoc.js" />
$(document).ready(function () {
$('.toc-odd level-1').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
위의 jQuery 예제는 코드를 렌더링하기 위해 구현할 수 있는 수백만 개의 방법 중 하나입니다.빠르고 간결한 라이브러리를 배우고 싶다면 30일 후에 jQuery 학습을 확인하십시오.
언급URL : https://stackoverflow.com/questions/9279842/make-an-unordered-list-into-a-drop-down-menu
'programing' 카테고리의 다른 글
| 목록에서 중복 제거 (0) | 2023.06.11 |
|---|---|
| 루트 상태에서 Vuex 모듈에 액세스할 수 없음 (0) | 2023.06.11 |
| XLS(Excel) 파일에서 데이터를 읽는 방법 [Java, Android] (0) | 2023.06.11 |
| Firestore 컬렉션에서 문서 ID를 가져오는 중 (0) | 2023.06.11 |
| 오라클에서 열의 데이터 유형 변경 (0) | 2023.06.11 |