Thay đổi css bằng jquery

Bằng cách sử dụng phương thức animate và scrollTop của Jquery bạn không cần phải thêm bất cứ plugin nào để tạo ra được hiệu ứng scroll-to-top

$('a.top').click(function (e) {
  e.preventDefault();
  $(document.body).animate({scrollTop: 0}, 800);
});

Back to top

2. Preload images

Nếu website của bạn sử dụng nhiều ảnh nhưng chúng chưa được load xong, vậy thì bạn có thể sử dụng câu lệnh ở dưới đây để load tạm thời 1 ảnh thay thế

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('
Thay đổi css bằng jquery

/* Binding to buttons */

var $btnList = jQuery('.dropdown-btn');
$btnList.click(toggleList);

Lời gọi hàm đầu tiên trả về một

var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');
5 đóng gói các phần tử
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
9. Với object này thì chúng ta đã có thể thực hiện các thao tác đối với các phần tử
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
9 ví dụ như gắn các hàm xử lý cho các sự kiện khác nhau được
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2 lập tài liệu trong chỉ mục
var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');
9. Tuy nhiên thì bạn nên xem tổng quan sơ lược bằng các chỉ mục con ở thanh điều hướng bên trái thay vì xem danh sách tổng hợp.

Ở đây chúng ta cần gắn hàm xử lý sự kiện click chuột và đã gọi hàm tương ứng là

var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
0. Lúc này, việc lặp lại thao tác gắn hàm xử lý
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
1 cho từng nút nhấn đã được
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2 tự động thực hiện. Kết quả là phần code chính của chúng ta đã trở nên ngắn gọn hơn rất nhiều. Hãy cùng xem xét chi tiết hơn về việc tạo ra một
var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');
5.

Tạo ra một var $document = $(document); var $allDropdownList = $('.dropdown-list'); var $newListItem = $('New item of the list'); 5

Một

var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');
5 có thể được tạo ra bằng cách gọi hàm khởi điểm của thư viện này với giá trị được truyền vào hàm có thể là một hoặc nhiều
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
6, hoặc một chuỗi mô tả
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
7, hoặc một chuỗi mô tả
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
8.

var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');

Chúng ta cũng có thể nhanh chóng lược bỏ những

var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
9 không cần thiết trong một tập kết quả truy vấn. Ví dụ sau đây sẽ chọn ra các
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
0 đang ẩn
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
1 bằng cách loại trừ các
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
2.

var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');

/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2 còn hỗ trợ rất nhiều bộ chọn khác và các bộ lọc giống như
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
4 trong ví dụ trên. Tất cả được lập tài liệu trong chỉ mục
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
5 của trang web. Nếu bạn xem danh sách các chỉ mục con của
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
5 ở phía bên trái thì các chỉ mục dành cho các bộ lọc có thêm từ khóa
var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
7.

Bên cạnh đó thì chúng ta cũng có thể chuyển đối tượng làm việc, xuất phát từ một phần tử HTML bất kỳ và di chuyển tới các phần tử cha, anh chị em, con cháu, bla bla... được lập tài liệu trong chỉ mục

var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
8.

var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();

Ở đây các hàm

var $body = $(document.body);
var $html = $body.parent();
var $head = $body.prev();
var $allDropdown = $body.children();
8 như
// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
0,
// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
1,
// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
2 đều có thể nhận vào chuỗi mô tả
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
7 để giúp chúng ta sàng lọc tập kết quả trong trường hợp bộ chọn trước đó trả về một nhóm các phần tử.

// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');

Như bạn thấy đấy, việc chọn ra các phần tử HTML mà chúng ta cần thao tác làm việc với sự hỗ trợ của

/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2, về cơ bản có cảm giác chung là: "Con đường nào rồi cũng sẽ dẫn tới thành Tơ-roa". Bạn chỉ cần nghĩ ra một logic chọn phù hợp và sẽ có rất nhiều hàm hỗ trợ để bạn có thể chuyển tải logic đó thành một mảnh code ngắn gọn. Bây giờ chúng ta hãy cùng nói về các thao tác cơ bản có thể áp dụng sau kết quả thu được từ các bộ chọn.

Các thao tác cơ bản với HTML

Việc truy xuất nội dung chữ của một phần tử HTML qua biến

// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
5 của
var $allDropdownList = $('.dropdown-list');
var $hiddenDropdownList = $allDropdownList.not('.shown');
6 được thay thế bằng hàm
// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
7 trong
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2.

var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'

Để thay đổi nội dung của phần tử được chọn, chúng ta có thể truyền vào hàm chuỗi nội dung thay thế. Trong trường hợp này thì thao tác gọi hàm

// xuất phát từ các container `.dropdown`
var $allDropdown = $('.dropdown');
// chọn tới các phần tử con không phải là các `.dropdown-list`
$btnList = $allDropdown.children(':not(.dropdown-list)');
9 sẽ trả về
var $document = $(document);
var $allDropdownList = $('.dropdown-list');
var $newListItem = $('New item of the list');
5 thực hiện thao tác. Như vậy chúng ta sẽ có kết viết nối tiếp nhiều thao tác sau khi đã cảm thấy quen thuộc với
/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2.

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
0

Trong trường hợp làm việc với nhiều phần tử thì

/* Binding to buttons */

$('.dropdown-btn').click(toggleList);
2 tất nhiên cũng giúp chúng ta tự động lặp thao tác thay đổi nội dung cho tất cả các phần tử được chọn.

Để làm việc với các

var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
3 nói chung, chúng ta sử dụng hàm
var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
4 (viết tắt của
var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
5). Để truy xuất giá trị của một thuộc tính nào đó, chúng ta cần truyền vào hàm tên của thuộc tính.

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
1

Để thay đổi giá trị của một thuộc tính, chúng ta cần truyền vào hàm

var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
4 thêm một giá trị nữa.

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
2

Các thao tác cơ bản với nội dung và các thuộc tính của các phần tử HTML được lập tài liệu trong chỉ mục

var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
7 và chỉ mục
var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
8.

Tuy nhiên đối với thuộc tính

var $firstItem = $('.dropdown-list > a').first();
console.log( $firstItem.text() );
// 'The rose is red'
9 nói riêng, do tần suất cần sử dụng rất nhiều nên chúng ta còn có thêm các hàm hỗ trợ làm việc trực tiếp, được liệt kê trong chỉ mục
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
00.

  • Để kiểm tra một phần tử có
    var $firstItem = $('.dropdown-list > a').first();
    console.log( $firstItem.text() );
    // 'The rose is red'
    
    9 nào đó hay không, chúng ta có hàm
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    02.
  • Sau đó nếu muốn thêm vào một
    var $firstItem = $('.dropdown-list > a').first();
    console.log( $firstItem.text() );
    // 'The rose is red'
    
    9 nào đó thì chúng ta có hàm
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    04.
  • Hoặc để xóa đi một
    var $firstItem = $('.dropdown-list > a').first();
    console.log( $firstItem.text() );
    // 'The rose is red'
    
    9 nào đó thì chúng ta có hàm
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    06.
  • Bên cạnh đó thì chúng ta có hàm
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    07 để thay đổi trạng thái
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    08 hoặc
    .dropdown {
       font-family: Arial, sans-serif;
       font-size: 16px;
    
       display: inline-block;
       position: relative;
    }
    
    .dropdown-btn {
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 1px;
    
       padding: 15px 30px;
    
       color: White;
       border: none;
       cursor: pointer;
    }
    
    .dropdown-btn.primary {
       background: RoyalBlue;
    }
    
    .dropdown-btn.primary:hover {
       background: DodgerBlue;
    }
    
    .dropdown-list {
       position: absolute;
       top: calc(100% + 3px);
    
       overflow: hidden;
       transition: max-height 0.5s;
    }
    
    .dropdown-list.shown {
       max-height: 390px;
    }
    
    .dropdown-list.hidden {
       max-height: 0;
    }
    
    .dropdown-item {
       display: block;
       min-width: 245px;
       max-width: 335px;
       padding: 15px 25px;
    
       color: White;
       background: RoyalBlue;
       border-bottom: 1px solid DodgerBlue;
    
       text-decoration: none;
    }
    
    .dropdown-item:hover {
       background: DodgerBlue;
    }
    
    09 của một
    var $firstItem = $('.dropdown-list > a').first();
    console.log( $firstItem.text() );
    // 'The rose is red'
    
    9.

Các thao tác cơ bản với CSS

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
11 mà chúng ta đang nói tới bao gồm nhóm các hàm hỗ trợ các thao tác phổ biến để làm việc với các
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
12, từ việc đo đếm giá trị đang được áp dụng bởi trình duyệt web cho đến áp dụng các giá trị khác thay thế.

Hàm tổng quan nhất là

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
13, sẽ giúp chúng ta truy xuất giá trị đang được áp dụng của một thuộc tính CSS.

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
3

Để thiết lập giá trị áp dụng mới cho thuộc tính CSS, chúng ta cung cấp thêm giá trị này ở vị trí thứ hai khi gọi hàm

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
13.

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
4

Riêng đối với thao tác làm việc với kích thước thực của các phần tử khi được trình duyệt web hiển thị thực tế. Chúng ta có các hàm hỗ trợ liên quan tới 2 từ khóa

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
15 và
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
16. Bạn có thể tự thực hiện vài ví dụ nếu cảm thấy cần thiết cho công việc xây dựng trang blog của bạn ở thời điểm hiện tại.
Thay đổi css bằng jquery

Bộ 3 các hàm

.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
17 ,
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
18, và
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 1px;

   padding: 15px 30px;

   color: White;
   border: none;
   cursor: pointer;
}

.dropdown-btn.primary {
   background: RoyalBlue;
}

.dropdown-btn.primary:hover {
   background: DodgerBlue;
}

.dropdown-list {
   position: absolute;
   top: calc(100% + 3px);

   overflow: hidden;
   transition: max-height 0.5s;
}

.dropdown-list.shown {
   max-height: 390px;
}

.dropdown-list.hidden {
   max-height: 0;
}

.dropdown-item {
   display: block;
   min-width: 245px;
   max-width: 335px;
   padding: 15px 25px;

   color: White;
   background: RoyalBlue;
   border-bottom: 1px solid DodgerBlue;

   text-decoration: none;
}

.dropdown-item:hover {
   background: DodgerBlue;
}
19, được sử dụng để xác định vị trí khung hiển thị trên dòng chảy nội dung của trang web, và thực hiện cuộn tới vị trí nhất định mà bạn muốn người dùng có thể bắt đầu xem ngay những nội dung quan trọng.