极客观点
项目管理
HarmonyOS
我想实现点击显示下拉菜单然后点击另一个下拉菜单上一个隐藏而不是可以同时显示。
还有点击窗口任意地方隐藏。
这是HTML：
<div id="left-se-login">
<button id="btn" class="login-btn third-btn">
<span>
<span>登陆</span>
<div class="login-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6 4.3">
<path d="M5.875,1.219 L3.188,3.849 L0.501,1.219 " stroke="#898989" stroke-width="1" fill="none"></path>
</svg>
</div>
<div class="login-icon" style="display: none">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6 4.3">
<path d="M5.875,1.219 L3.188,3.849 L0.501,1.219 " stroke="#0078D7" stroke-width="1" fill="none"></path>
</svg>
</div>
</span>
</button>
</div>
<!--登陆隐藏菜单-->
<div id="login-menu" flag="false" style="display: none">
<!--菜单顶部-->
<div id="login-menu-top">
<h4>
<a href="#">我的账户</a>
</h4>
<ul>
<li>
<a href="#">我的订单</a>
</li>
<li>
<a href="#">地址管理</a>
</li>
<li>
<a href="#">我的专区</a>
</li>
<li>
<a href="#">我的优惠券</a>
</li>
</ul>
</div>
<!--菜单底部-->
<div id="login-menu-bottom">
<a href="">登陆</a>
</div>
</div><div id="top-third-middle">
<span>
<a href="">微软官方商城</a>
</span>
<ul>
<li>
<button class="third-btn" flag="false">
<span>
硬件
<!--新品-->
<em id="new" class="new">新品</em>
</span>
<!--硬件小三角-->
<div class="yingJian">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6 4.3">
<path d="M5.875,1.219 L3.188,3.850 L0.501,1.219 " stroke="#0078d7" stroke-width="1" fill="none" fill-rule=""></path>
</svg>
</div>
<div class="yingJian" style="display: none">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6.376 3.625">
<path d="M6.562,4.531 L3.875,1.900 L1.188,4.531" stroke="#0078d7" stroke-width="1" fill="none"></path>
</svg>
</div>
</button>
<!--第三个导航栏下拉菜单-->
<!--硬件下拉菜单-->
<ul class="top-third-menu">
<li>
<a href="#">
<span>
Surface
<span class="new">新品</span>
</span>
</a>
</li>
<li>
<a href="#">
<span>电脑与平板</span>
</a>
</li>
<li>
<a href="#">
<span>Xbox+游戏</span>
</a>
</li>
<li>
<a href="#">
<span>混合现实</span>
</a>
</li>
<li>
<a href="#">
<span>配件</span>
</a>
</li>
</ul>
</li>
<li>
<button class="third-btn" flag="false">
<span>软件</span>
<!--软件小三角-->
<div class="yingJian">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6 4.3">
<path d="M5.875,1.219 L3.188,3.850 L0.501,1.219 " stroke="#0078d7" stroke-width="1" fill="none" fill-rule=""></path>
</svg>
</div>
<div class="yingJian" style="display: none">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="0 0 6.376 3.625">
<path d="M6.562,4.531 L3.875,1.900 L1.188,4.531" stroke="#0078d7" stroke-width="1" fill="none"></path>
</svg>
</div>
</button>
<!--软件二级菜单-->
<ul class="top-third-menu" style="height: 332px">
<li>
<a href="#">
Office
</a>
</li>
<li>
<a href="#">
Windows
</a>
</li>
<li>
<a href="#">
Apps and Windows 10 游戏
</a>
</li>
<li>
<a href="#">
Visual Studio
</a>
</li>
<li>
<a href="#">
Microsoft Complete
</a>
</li>
<li>
<a href="#">
其他软件与服务
</a>
</li>
</ul>
</li>
<li class="third-hover">
<span>
<a href="">商务</a>
</span>
</li>
<li class="third-hover">
<span>
<a href="">教育</a>
</span>
</li>
<li class="third-hover">
<span>
<a href="#">以旧换新</a>
</span>
</li>
<li class="third-hover">
<span>
<a href="#">领券中心</a>
</span>
</li>
</ul>
<!--第三个导航栏左边内容-->
<div id="top-third-left">
<a href="">订单跟踪</a>
<span>30天退换货</span>
</div>
</div>这是JS
$(".third-btn").click(function () {
if ($(this).siblings("ul").is(":visible")){
var btn = $(".third-btn").index(this);
$(this).siblings("ul").slideUp(500);
}else{
$(this).siblings("ul").slideDown(500);
}
});
这样只能实现点击显示点击隐藏但是可以同时出现
请大神赐教，谢谢！
html5