91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

jquery怎么實現下拉菜單功能

小億
140
2023-08-06 02:05:49
欄目: 編程語言

要實現下拉菜單功能,可以使用jQuery的事件和CSS樣式來實現。以下是一個簡單的示例:

HTML代碼:

<div class="dropdown">
<button class="dropdown-toggle" data-toggle="dropdown">下拉菜單</button>
<ul class="dropdown-menu">
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>
</div>

CSS樣式:

.dropdown .dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown .dropdown-toggle {
background-color: #f9f9f9;
border: none;
color: black;
padding: 8px 16px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.dropdown:hover .dropdown-menu {
display: block;
}

JavaScript代碼:

$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
});

在這個示例中,點擊按鈕時,使用toggle()方法來切換下拉菜單的顯示和隱藏狀態。同時使用CSS樣式來設置下拉菜單的位置、背景色等樣式。

0
石河子市| 武穴市| 巴林右旗| 泰顺县| 新安县| 铜川市| 枣阳市| 社会| 临沂市| 罗源县| 镇宁| 旬阳县| 福安市| 邹城市| 丁青县| 白水县| 巍山| 田阳县| 屏边| 漳平市| 紫金县| 桓台县| 永修县| 晋城| 宁晋县| 工布江达县| 内江市| 新安县| 左云县| 湟源县| 商河县| 贺兰县| 桐庐县| 青铜峡市| 临澧县| 平安县| 玉环县| 盈江县| 长丰县| 新郑市| 尼木县|