之前解决方案
(苏宁案例事件所引发)
目的
点击输入框子菜单现实
点击子菜单,子菜单不消失,输入框失去焦点
点击其他地方,子菜单小时
我的之前下拉菜单
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>