導航:首頁 > 編程語言 > javascript下拉菜單

javascript下拉菜單

 發布時間：2023-06-08 20:07:04

A. html+css+javascript 菜單單擊式下拉菜單

HTML:


<!DOCTYPEhtml>
<html>
<head>
<title>Dropdown</title>
<linkrel="stylesheet"href="style.css">
<metacharset="utf-8"/>
</head>
<body>
<ul>
<liclass="dropdown">
<aid="a"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">標題</a>
<divclass="dropdown-content"id="dropdown-a">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
<liclass="dropdown">
<aid="b"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">標題B</a>
<divclass="dropdown-content"id="dropdown-b">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
</ul>
<scriptsrc="script.js"></script>
</body>
</html>


CSS (style.css):


body{
font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
lia,.dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
lia:hover,.dropdown:hover.dropbtn{
background-color:#1f75cf;
}
li.dropdown{
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#fafafa;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
}
.dropdown-contenta{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
.dropdown-contenta:hover{
color:white;
background-color:#1f75cf;
}
.show{
display:block;
}


JavaScript (script.js):


functionshowList(o){
hideList("dropdown-content"+o.id);
document.getElementById("dropdown-"+o.id).classList.toggle("show");
}


functionhideList(option){
vardropdowns=document.getElementsByClassName("dropdown-content");

for(vari=0;i<dropdowns.length;i++){
varopenDropdown=dropdowns[i];
if(openDropdown.id!=option){
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}


window.onclick=function(e){
if(!e.target.matches('.dropbtn')){
hideList("");
}
}


點擊標題 A：



JSFiddle 調試：jsfiddle.net/soL73u4y/2/

B. 請問這樣的數組，怎麼用javascript實現三級聯動的下拉菜單（select）

你可以是用三維數組啊！用JS的事件配合著寫啊！邏輯強了點，但是不怎麼難！

C. javascript 選擇下拉菜單 使 文本框變灰色

<select name="Profession[]" value="no" onchange="lock()">

function lock(){
var sel=document.getElementById("Profession[]");
if(sel.value=="stu") document.getElementById("salary[]").disabled;
}

D. js下拉菜單，怎樣更簡便的實現

你這個效果的下拉菜單，不需要用 JavaScript，只用CSS就能實現。

加上一句

li:hover ul{ display:block;}

就行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>無標題文檔</title>
<style type="text/css">* {
margin: 0px;
padding: 0px;
}

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}

#nav {
width: 600px;
height: 40px;
background-color: #eee;
margin: 0 auto;
}

ul {
list-style: none;
}

ul li {
float: left;
line-height: 40px;
text-align: center;
width: 100px;
}

a {
text-decoration: none;
color: #000;
display: block;
}

a:hover {
color: #F00;
background-color: #666;
}

ul li ul li {
float: none;
background-color: #eee;
margin: 2px 0px;
}

ul li ul {
display: none;
}
li:hover ul{ display:block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">課程大廳</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Html/CSS</a></li>
</ul>
</li>
<li><a href="#">學習中心</a>
<ul>
<li><a href="#">視頻學習</a></li>
<li><a href="#">實例練習</a></li>
<li><a href="#">問與答</a></li>
</ul>
</li>
<li><a href="#">經典案例</a></li>
<li><a href="#">關於我們</a></li>
</ul>
</div>
</body>
</html>

E. js怎麼做下拉菜單

你可以做一個標志位 當標志位是1的時候 點擊效果是出現菜單 然後標志位變成2 當標志位是2的時候 點擊效果是收起菜單 標志位再變成1

閱讀全文

與javascript下拉菜單相關的資料

熱點內容
dede工具 瀏覽：507
5g網盟app怎麼下載 瀏覽：486
微信備份老是連接中斷 瀏覽：886
出台多少份文件 瀏覽：380
鞋子怎麼搭配衣服的app 瀏覽：755
文件名使用的通配符的符號是什麼 瀏覽：916
lol分卷文件損壞怎麼辦 瀏覽：276
6分管車螺紋怎麼編程 瀏覽：732
海口農商銀行信用卡app是什麼 瀏覽：770
win10任務欄文件夾我的電腦 瀏覽：14
安卓nba2k18 瀏覽：776
文件夾密碼怎麼修改密碼 瀏覽：271
蘋果數據中心用什麼伺服器 瀏覽：769
省內圓通快遞寄文件夾需要多少錢 瀏覽：740
iphone程序加密 瀏覽：884
win10文件夾調整文件行高 瀏覽：681
創意手繪教程 瀏覽：754
微信刪除帳號信息 瀏覽：596
mysql操作類文件 瀏覽：649
繞過xp密碼 瀏覽：158

友情鏈接