js點選後出現點選外部隱藏
阿新 • • 發佈:2018-11-09
對指定div設定焦點 為0,tabindex="0" 當滑鼠點選div時焦點變為-1,執行onfocus="show1()"所呼叫的函式 ,show1()。當輸變電及其他地方,也就是說滑鼠失去焦點,則執行onblur="unshow1()"操作,也就是呼叫unshow函式。
<div style="margin-top:7px;margin-left:35px" tabindex="0" onfocus="show1()" onblur="unshow1()"> <a id="new-file" class="button"><font size="2"color="white ">新建</font ></a> <div id="set1" style="border:1px black solid;display:none;position:absolute;margin-left:30px;background-color:white;margin-top:5px;width:142px;height:272px;"> <div class="div_little"style="margin-top:0px;"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>新建資料夾</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>匯入</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>流程圖</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>思維導圖</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>原型圖</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>UML</font></div> </div> <div class="div_little"> <div style="float:left;margin-left:16px;margin-top:8px"><img src="9.png"/></div> <div style="float:left;margin-left:10px;margin-top:8px"><font size=1>網路拓撲圖</font></div> </div> </div>
下面是兩個函式:
function show(){ document.getElementById("set").style.display=""; } function unshow(){ document.getElementById("set").style.display="none"; } function show1(){ document.getElementById("set1").style.display=""; } function unshow1(){ document.getElementById("set1").style.display="none"; }
點選頭像後出現:
點選其他地方:下拉框消失: