极客观点
项目管理
HarmonyOS
1.点击“按类别查看宝贝”时，下拉菜单出现了，怎样在点击空白处或者点击“按类别查看宝贝”时，让下拉菜单消失？
2.怎么解决定位问题：如果把我这段代码放到总代码里面（全页面中），点击“按类别查看宝贝”时，页面会发生移动（移动到顶端），怎样让页面固定在点击“按类别查看宝贝”时的位置？
希望尽量用简洁实用的js代码（如果用jquery的话，请用不需要引用外部文件的代码）实现！能给改下/加一下代码么？
先上上个点击后下拉菜单出现的图：
这里是实现点击后出现下拉菜单的代码（工作太忙，暂无暇整理代码，请原谅）：
<!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-equip="Content-Type" content="text/html" charset="UTF-8"/>
<title>演示页面</title>
<style>
* {margin:0 auto;padding:0;}
body {
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a {text-decoration:none;}
.clear {clear:both;zoom:1;height:0;line-height:0;font-size:0;}
.mid-board-holder {
width:1016px;height:;margin-top:24px;border:0px solid;
padding-top:0px;padding-bottom:0px;
text-align:center;
}
.mid-board-container-L {float:left;border:0px solid;
}
.mid-board-container-L ul {
list-style:none;float:left;clear:both;zoom:1;
width:236px;height:;border:0px solid;
padding-bottom:34px;
}
.mid-board-container-L li { text-align:left;
padding-top:0;text-indent:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;border:0px solid;
}
.mid-board-container-L ul li span {float:right;
margin-right:12px;border:0px solid;
width:50px;text-align:right;overflow:hidden;
white-space:nowrap;text-overflow:ellisis;
}
.mid-board-container-L li a { border:0px solid;
font-size:14px;color:#444;
font-family:Arial, Microsoft YaHei,Simsun;
padding-left:0px;padding-right:0px;
line-height:38px;
width:236px;height:38px;
}
.mid-board-container-L li a:hover {float:left;
background-color:#f2f2f2;
}
.mid-board-container-L .custom {clear:both;float:left;
width:234px;height:36px;
background-color:#f56400;
border:1px #dc5a00 solid;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
font-size:14px;color:#fff;font-weight:400;
line-height:36px;font-family:Microsoft YaHei,Simsun;
}
.mid-board-container-L .custom a {color:#fff;}
.mid-board-container-L .contact {clear:both;float:left;
width:234px;height:34px;margin-top:12px;
background-color:#fff;
border:1px #d9d9d9 solid;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
font-size:14px;color:#444;font-weight:400;
line-height:34px;font-family:Microsoft YaHei,Simsun;
}
.mid-board-container-L .contact a {color:#444;}
.store-items {float:left;font-size:16px;font-weight:700;line-height:16px;
font-family:Microsoft YaHei,Simsun;padding:0;margin:0;
padding-bottom:24px;color:#444;padding-top:20px;
}
.mid-board-secline,.mid-board-secline1 {float:left;clear:both;
width:236px;border-top:1px #e1e3df solid;
margin-top:30px;margin-bottom:36px;
}
.mid-board-secline1 {marigin-top:32px;margin-bottom:27px;}
.mid-board-sales,.report {float:left;clear:both;
float:left;clear:both;line-height:14px;
font-family:Arial,Microsoft YaHei,Simsun;
font-size:14px;color:#444;font-weight:400;
}
.mid-board-sales a,.report a {color:#444;}
.mid-board-container-R {float:left;border:0px solid;
width:762px;margin-left:18px;
}
.mid-board-container-R .sortbox {
float:right;clear:both;line-height:36px;
width:166px;height:36px;
border:1px #d9d9d9 solid;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.mid-board-container-R .sortbox .sort-icon {
float:right;margin-right:12px;margin-top:15px;
}
.mid-board-container-R .sortbox .sort {font-size:12px;color:#888;
font-family:Microsoft YaHei,Simsun;
margin-left:12px;float:left;
line-height:34px;
}
.mid-board-container-R .sortbox .sort a {color:#888;}
.mid-board-container-R .sortbox .dmenu ul {float:left;clear:both;
margin-top:4px;position:relative;
z-index:10000;
top:4px;left:-30px;
list-style:none;
border:1px #e5e5e5 solid;
width:196px;height:180px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
display:none;
}
.mid-board-container-R .sortbox .dmenu li {text-align:left;
font-size:12px;color:#;
font-family:Microsoft YaHei,Simsun;
}
.mid-board-container-R .sortbox .dmenu li a {padding-left:0px;text-indent:18px;
clear:both;float:left;
color:#444;line-heigth:30px;
width:196px;
background-color:#fff;float:left;
}
.mid-board-container-R .sortbox .dmenu li a:hover {
background-color:#f5f5f5;
}
.mid-board-cardL {padding:0;
float:left;width:241px;height:192px;margin-right:0px;
border-radius:3px;border:0;
-webkit-border-radius:3px;
-moz-border-radius:3px;border:0px # solid;
object-fit:cover;
}
.mid-board-cardR {padding:0;
float:left;width:242px;height:192px;margin-right:0px;
border-radius:3px;border:0;
-webkit-border-radius:3px;
-moz-border-radius:3px;border:0px # solid;
object-fit:cover;
}
.mid-board-container-R .more-items a {color:#666;}
.store-cmmt-holder {
width:1016px;margin-top:48px;
}
</style>
<script>
function showDmenu(){
var obj = document.getElementById("show_dmenu")
obj.style.cssText = "display:block;"
}
</script>
</head>
<body>
<!--中部展板开始-->
<div class="mid-board-holder">
<div class="mid-board-container-L">
<p class="store-items">宝贝</p>
<ul>
<li style="background-color:#f2f2f2;"><a href="">所有宝贝 <span>668</span></a></li>
<li><a href="#">宝贝分类一<span>5</span></a></li>
<li><a href="#">宝贝分类二<span>156</span></a></li>
<li><a href="#">宝贝分类三<span>16</span></a></li>
<li><a href="#">宝贝分类四<span>33</span></a></li>
<li><a href="#">宝贝分类五<span>2</span></a></li>
<li><a href="#">宝贝分类六<span>3</span></a></li>
<li><a href="#">宝贝分类七<span>36</span></a></li>
<li><a href="">宝贝分类八<span>1</span></a></li>
<li><a href="#">宝贝分类九<span>7</span></a></li>
</ul>
<div class="custom" style=""><a href="#">进入订制填单</a></div>
<div class="contact"><a href="#">与店主联系</a></div>
<hr0 class="mid-board-secline"></hr0><p class="mid-board-sales">
销量4312</p>
<hr0 class="mid-board-secline1"></hr0><p class="mid-board-sales">
<a href="#">报告本店</a></p>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="mid-board-container-R">
<div style= "clear:both;height:38px;margin-bottom:12px;
margin-top:10px;">
<div class="sortbox">
<span class="sort"><a href="#" onclick="showDmenu()">
按类别查看宝贝</a></span>
<img src="store-sortbox-icon.png" class="sort-icon"/>
<div class="dmenu" >
<ul id="show_dmenu">
<li><a href="#">按销量</a></li>
<li><a href="#">
按日期</a></li>
<li><a href="#">
按价格从低到高</a></li>
<li><a href="#">
按价格从高到低</a></li>
<li><a href="#">
按相关性</a></li></ul></div>
</div></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
布局需要进行调整；
按照上面的方式进行布局，微调样式，能够实现你所说的效果。定位的问题，想好怎么布局就OK！