关于下拉菜单的问题

最新推荐文章于 2022-04-15 10:31:28 发布

原创最新推荐文章于 2022-04-15 10:31:28 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

3 篇文章

订阅专栏

之前解决方案

(苏宁案例事件所引发)

目的

点击输入框子菜单现实

点击子菜单,子菜单不消失,输入框失去焦点

点击其他地方,子菜单小时

我的之前下拉菜单
0.设置一个主容器
主容器包含input 和子菜单
display:inline-block
自适应
1.主菜单就是一个 input
input聚焦时,子菜单显示
主容器被拉伸
2.点击主容器中的元素,子菜单显示
3.点击主容器外的元素,再次单隐藏
如何定位,点击的是主容器外的元素
通过鼠标位置来看

最开始的想法
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="jQuery/jquery-3.2.1.js"></script>
</head>
<style>
#d1 {
display: inline-block;
}

#d2 {
width: 200px;
height: 200px;
background-color: #00AAFF;
display: none;
}

input {
width: 200px;
}
</style>
<body>
<div id="d1">
<input type="text" value="hahahah">
<div id="d2"></div>
</div>
<p></p>
</body>
<script>
$(function () {
$("input").focus(function () {
$("#d2").show();
}).blur(function () {
});

$("#d1").click(function () {
$("#d2").show();
});
$('body').click(function (event) {
if (event.pageX > 214 || event.pageY > 232) {
$("#d2").hide();
}
}).mousemove(function () {
$("p").html("X:"+event.pageX+"Y:"+event.pageY);
});
});
</script>
</html>

-----------------------------------------------------------------------------------

两段代码不相关

后来解决方式 //是用事件的传递,使用按下键盘子菜单出现
<script>
/*
* oninput
* onkeyup
* 分别使用两种方法实现
* */
$("input[type=text]").on("input", function () {
$(this).siblings("div").show();
});
/* $("input[type=text]").on("keyup", function () {
console.log("caocaocaocaocao");
});*/
$(document).click(function () {
$("#content").on("click",function () {
return false;
});
$("#sub_menu").hide();
});

$("#sub_menu li").on("click",function () {

});

</script>