Trong hướng dẫn này, bạn sẽ học cách tạo một menu thả xuống đơn giản với vanilla Javascript, HTML và CSS. Chúng ta sẽ xem qua mã HTML, CSS và Javascript, nhưng chú ý nhiều hơn đến phần lập trình, vì đây là hướng dẫn về JS. Chúng tôi sẽ chỉ sử dụng JS và CSS đơn giản, không có khung hoặc bộ xử lý trước. Ngoại lệ (loại) duy nhất sẽ nhập tệp CSS Font Awesome vì chúng tôi sẽ sử dụng một trong các biểu tượng của nó.
Điều này được nhắm mục tiêu đến các nhà phát triển có hiểu biết trung bình về HTML, CSS và JS. Tôi đã cố gắng làm cho nó rõ ràng nhất có thể, nhưng tôi sẽ không tập trung quá nhiều vào các chi tiết ở đây. Tôi mong bạn hãy tận hưởng.
Ảnh chụp màn hình
Đây là cách kết quả mã trông giống như:
Màn hình lúc đầu:
Đã mở danh sách thả xuống:
Danh sách thả xuống với tùy chọn được chọn:
HTML:
Trong phần này, chúng ta sẽ thảo luận về việc triển khai mã HTML cho trang demo. Để bắt đầu, chúng ta hãy xem <head> mã số
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dropdown Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
</head>Về cơ bản, đây là bản tóm tắt phần đầu của HTML, ngoại trừ phần link các thẻ đang tải hai biểu định kiểu CSS mà chúng ta sẽ sử dụng trong hướng dẫn này: các kiểu Font Awesome và styles.css tệp, nơi chúng tôi sẽ xác định kiểu của trang này.
Sau đó, có phần còn lại của tệp HTML, phần thân:
<body>
<div class="dropdown">
<div class="title pointerCursor">Select an option <i class="fa fa-angle-right"></i></div>
<div class="menu pointerCursor hide">
<div class="option" id='option1'>Option 1</div>
<div class="option" id='option2'>Option 2</div>
<div class="option" id='option3'>Option 3</div>
<div class="option" id='option4'>Option 4</div>
</div>
</div>
<span id='result'>The result is: </span>
<script>
...
</script>
</body>
</html>Phần này có thể chia làm 3 phần chính:
- Các
.dropdowndiv, nơi cấu trúc của phần tử thả xuống sẽ được xác định. - Các
#resultphần tử, sẽ chứa tùy chọn đã chọn của người dùng, từ phần tử thả xuống. - Kịch bản được viết vào
<script>nhãn. Việc triển khai của nó được ẩn ở đây, vì các chi tiết của nó sẽ được giải thích trong phần cuối cùng của hướng dẫn này.
Phần tử thả xuống là một div chứa một title và menu phần tử. Cái trước chỉ xác định văn bản nào sẽ được trình bày trên thành phần trước khi bất kỳ tùy chọn nào được chọn và cái sau sẽ xác định các tùy chọn mà thành phần có thể chọn.
Các result phần tử ở đó chỉ để cho bạn biết tùy chọn nào hiện đang được chọn.
phong cách:
Dưới đây bạn có thể kiểm tra mã css đầy đủ. Như bạn có thể thấy nó sử dụng CSS3 transition và transform công trình.
Hãy chú ý đến .dropdown định nghĩa các lớp. Chúng được sử dụng để xác định bố cục cho thành phần vùng chứa thả xuống cũng như các phần tử bên trong của nó, chẳng hạn như .title và nó .option‘S.
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.hide {
max-height: 0 !important;
}
.dropdown{
border: 0.1em solid black;
width: 10em;
margin-bottom: 1em;
}
.dropdown .title{
margin: .3em .3em .3em .3em;
width: 100%;
}
.dropdown .title .fa-angle-right{
float: right;
margin-right: .7em;
transition: transform .3s;
}
.dropdown .menu{
transition: max-height .5s ease-out;
max-height: 20em;
overflow: hidden;
}
.dropdown .menu .option{
margin: .3em .3em .3em .3em;
margin-top: 0.3em;
}
.dropdown .menu .option:hover{
background: rgba(0,0,0,0.2);
}
.pointerCursor:hover{
cursor: pointer;
}
.rotate-90{
transform: rotate(90deg);
}JavaScript:
Bây giờ chúng ta sẽ xem phần Javascript được triển khai như thế nào. Đầu tiên chúng ta sẽ xem qua các định nghĩa hàm và sau đó là mã lệnh gọi các hàm này để thực hiện các hành động thả xuống.
Về cơ bản, có 3 hành động diễn ra tùy thuộc vào tương tác của người dùng là gì, khi người nghe của họ được thêm vào các phần tử DOM:
- Nhấp vào phần tử thả xuống
- Chọn một trong các tùy chọn thả xuống
- Thay đổi tùy chọn hiện được chọn
Tôi muốn làm rõ rằng chúng tôi đang sử dụng chức năng mũi tên ( () => {} ) và const từ khóa, đó là các tính năng ES6. Bạn có thể ổn nếu đang sử dụng phiên bản mới nhất của trình duyệt, nhưng hãy ghi nhớ điều đó.
1. Nhấp vào phần tử thả xuống
function toggleClass(elem,className){
if (elem.className.indexOf(className) !== -1){
elem.className = elem.className.replace(className,'');
}
else{
elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className;
}
return elem;
}
function toggleDisplay(elem){
const curDisplayStyle = elem.style.display;
if (curDisplayStyle === 'none' || curDisplayStyle === ''){
elem.style.display = 'block';
}
else{
elem.style.display = 'none';
}
}
function toggleMenuDisplay(e){
const dropdown = e.currentTarget.parentNode;
const menu = dropdown.querySelector('.menu');
const icon = dropdown.querySelector('.fa-angle-right');
toggleClass(menu,'hide');
toggleClass(icon,'rotate-90');
}Khi phần tử thả xuống được nhấp vào, nó sẽ mở (nếu nó được đóng) hoặc đóng (nếu nó được mở). Điều này xảy ra bằng cách ràng buộc toggleMenuDisplay đến trình xử lý sự kiện nhấp chuột trên phần tử thả xuống. Chức năng này chuyển đổi hiển thị của nó menu phần tử bằng cách sử dụng toggleDisplay và toggleClass chức năng.
2. Chọn một trong các tùy chọn thả xuống
function handleOptionSelected(e){
toggleClass(e.target.parentNode, 'hide');
const id = e.target.id;
const newValue = e.target.textContent + ' ';
const titleElem = document.querySelector('.dropdown .title');
const icon = document.querySelector('.dropdown .title .fa');
titleElem.textContent = newValue;
titleElem.appendChild(icon);
//trigger custom event
document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
//setTimeout is used so transition is properly shown
setTimeout(() => toggleClass(icon,'rotate-90',0));
}3. Thay đổi tùy chọn hiện được chọn
function handleTitleChange(e){
const result = document.getElementById('result');
result.innerHTML = 'The result is: ' + e.target.textContent;
}Chức năng handleTitleChange bị ràng buộc vào phong tục change sự kiện trên .title phần tử, để thay đổi #result nội dung phần tử bất cứ khi nào phần tử tiêu đề thay đổi. Việc kích hoạt sự kiện này được thực hiện ở phần trước.
Mã chính
//get elements
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');
//bind listeners to these elements
dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);Trong phần chính, chỉ có một số mã đơn giản để lấy các phần tử tùy chọn và tiêu đề của trình đơn thả xuống để liên kết với chúng các sự kiện được thảo luận trong phần trước.
Thử nghiệm
Bạn có thể tìm thấy bản demo và mã đầy đủ của ứng dụng này tại đây.
