jquery - '如何修复'JQuery Dropdown inside dropdown''
问题描述
我正在使用多个下拉菜单在我的网站中设置我的简历
我已经尝试过 youtube 教程和 css/jQuery
<div0 class="dropdown">
<button class="button"><img src="resume start.PNG" alt="resume" width="auto" height="auto"></button>
<div00 style="display:none;" id="dropcontent">
<img src="resume detail.PNG" alt="detail" width="auto" height="auto">
<div000>
<button class="button1"><img src="career goal-objective.png" alt="career goal/objective" width="auto" height="auto"></button>
<div0000 style="display:none;" id="dropdown">
<img src="job goal.png" alt="job goal" width="auto" height="auto">
</div0000>
</div000>
</div00>
</div0>
$(document).ready(function(){
$("div0").click(function(){
$("div00").toggle();
});
});
$(document).ready(function(){
$("div000").click(function(){
$("div0000").toggle();
});
});
我希望下拉菜单充当正常的下拉菜单,但它实际上会打开下拉菜单,然后另一个会关闭下拉菜单。但是当它再次打开时,它会打开第二个下拉菜单
解决方案
您需要检查 div 在 jquery 中是否可见...切换打开可见性,但没有关闭可见性...像这样,试一试
$(document).ready(function(){
$("div0").click(function(){
if($("div0000").is(":visible")) {
$("div0000").toggle();
}
$("div00").toggle();
});
});
$(document).ready(function(){
$("div000").click(function(){
if($("div00").is(":visible")) {
$("div00").toggle();
}
$("div0000").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div0 class="dropdown">
<button class="button"><img src="resume start.PNG" alt="resume" width="auto" height="auto"></button>
<div00 style="display:none;" id="dropcontent">
<img src="resume detail.PNG" alt="detail" width="auto" height="auto">
<div000>
<button class="button1"><img src="career goal-objective.png" alt="career goal/objective" width="auto" height="auto"></button>
<div0000 style="display:none;" id="dropdown">
<img src="job goal.png" alt="job goal" width="auto" height="auto">
</div0000>
</div000>
</div00>
</div0>
推荐阅读
- linux - 文本文件的单独列
- python - AttributeError:模块 'importlib' 没有属性 'util' II
- angular - Angular:RxStomp .Watch .Subsribe 方法
- swiftui - 如何检测 SwiftUI List 中的向上、向下、顶部和底部滚动
- sql - SQL 错误:将 varchar 值 '2020-11-26' 转换为数据类型位时转换失败
- python - 使用氦气进行动态网页抓取
- sql - Snowflake SQL:如何使用 JSON 对象循环遍历数组,以查找符合条件的项目
- logic - 重置约翰逊计数器 Verilog 的问题
- selenium - 屏幕截图中缺少 firefox-headless 控制框 - selenium - linux
- regex - 使用正则表达式查找两个字符串之间的多个匹配项