js或jquery實現點選某個按鈕或元素顯示div,點選頁面其他任何地方隱藏div
阿新 • • 發佈:2018-11-28
點選某個元素顯示div,點選頁面其他任何地方隱藏div,可用javascript和jquery兩種方法實現:
一:javascript實現方法技巧
<script>
//定義stopPropagation 方法的使用,該方法將停止事件的傳播,阻止它被分派到其他 Document 節點。
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};
//獲取元素的ID
function $(id) {
return document.getElementById(id);
};
//初始化載入
window.onload = function () {
document.onclick = function (e) {
$("element").style.display = "none";
}
$("btn按鈕").onclick = function (e) {
$("element").style.display = "block";
e = e || event;
stopFunc(e);
}
$("element").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
</script>
二:jquery實現方法技巧:
<script>
$("#btn按鈕").on("click", function(e){
$("#element").show(); $(document).one("click", function(){
$("#element").hide();
}); e.stopPropagation();
});
</script>
有更多更好的想法的朋友可以聯絡我Q:1159268659
一:javascript實現方法技巧
<script>
//定義stopPropagation 方法的使用,該方法將停止事件的傳播,阻止它被分派到其他 Document 節點。
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};
//獲取元素的ID
function $(id) {
return document.getElementById(id);
};
//初始化載入
window.onload = function () {
document.onclick = function (e) {
$("element").style.display = "none";
}
$("btn按鈕").onclick = function (e) {
$("element").style.display = "block";
e = e || event;
stopFunc(e);
}
$("element").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
</script>
二:jquery實現方法技巧:
<script>
$("#btn按鈕").on("click", function(e){
$("#element").show(); $(document).one("click", function(){
$("#element").hide();
}); e.stopPropagation();
});
</script>
有更多更好的想法的朋友可以聯絡我Q:1159268659