資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何避免下拉選單在內部點選時關閉選單項？
我們可以使用 preventDefault() 方法來阻止下拉選單上點選事件的預設行為。透過這樣做，選單項在內部點選時不會關閉。此外，我們可以在下拉選單上新增一個點選事件監聽器，並設定 event.stopPropagation() 方法來阻止事件傳播到父元素。
HTML 下拉選單
HTML 下拉選單是一種表單元素，允許使用者從選項列表中選擇一個選項。它使用 HTML 中的 "select" 和 "option" 標籤建立。 "select" 標籤定義下拉容器， "option" 標籤定義下拉選單中的選項。要預選一個選項，請在 "option" 標籤上使用 "selected" 屬性。所選選項的值可以使用 JavaScript 訪問，或者使用 "select" 標籤上的 "name" 屬性訪問。
方法
防止下拉選單在內部點選時關閉的一種方法是使用 event.stopPropagation() 方法阻止事件冒泡到父元素。您可以將此方法附加到下拉選單或其子元素的點選事件上，以防止在內部點選時選單關閉 -
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
或者，您可以使用 event.preventDefault() 來阻止點選事件的預設行為，這也可以防止選單關閉 -
document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
event.preventDefault();
});
您也可以使用 jQuery 來做到這一點 -
$(".dropdown-menu").click(function(event){
event.stopPropagation();
});
還需要注意的是，這取決於您使用的框架或庫。某些框架或庫可能有自己的處理點選事件和阻止其關閉選單的方法。
最終程式碼
以下是如何使用 JavaScript 和 HTML 建立一個在點選專案時不會關閉的下拉選單的示例 -
HTML
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
CSS
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
JavaScript
// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");
// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
// Prevent the default action of the link (redirecting to the href)
event.preventDefault();
// Do something else here (e.g. update the page with the link's data)
});
});
解釋
在此示例中，我們使用 HTML 和 CSS 建立了一個下拉選單。預設情況下選單隱藏，當用戶將滑鼠懸停在按鈕上時顯示。
在 JavaScript 中，我們首先使用 querySelectorAll() 方法獲取選單內部的所有連結。然後我們迴圈遍歷所有連結，併為每個連結新增一個點選事件監聽器。在事件監聽器中，我們使用 preventDefault() 方法阻止連結的預設操作（即重定向到連結的 href）。這樣，當用戶點選連結時，它不會關閉選單，並且您可以對連結執行其他操作。
您可以透過在每個連結的點選事件上新增一些自定義功能來進一步增強功能。
完整程式碼
<html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<script>
// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");
// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
// Prevent the default action of the link (redirecting to the href)
event.preventDefault();
// Do something else here (e.g. update the page with the link's data)
});
});
</script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</html>
13K+ 瀏覽量
