javascript - 高级下拉菜单
问题描述
我正在尝试制作一个高级下拉菜单，但遇到一个问题，当我单击菜单内的任何项目时，菜单已关闭我正在使用引导程序 4.2.1 如图所示，红色区域是单击它们以关闭下拉菜单时我不想要的地方并且绿色区域是单击 高级下拉菜单时我想要的
为什么我要这样，因为下拉菜单中发生了一些事情 更多详细信息请参见图片 高级下拉图像 2 用于执行此操作的完整代码 附上记录，当它显示在网站，因为它是为计算机设计的，而不是为移动设备设计的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Document</title>
<style>
* {
direction: rtl;
text-align: right;
}
body {
text-align: right;
}
.navbar-nav {
padding-right: 0px;
}
.dropdown-item {
text-align: right;
}
.icon-link:hover {
background-color: rgba(0, 0, 0, .075);
}
.scrollbar {
max-height: 320px;
overflow: auto;
}
/* width */
.scrollbar::-webkit-scrollbar {
width: 5px;
}
/* Track */
.scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
.navbarDropdownHover:hover{
background-color: rgba(60, 64, 67, 0.1);
border-radius: 25px;
}
.navbarDropdownFocus:focus {
background-color: rgba(60, 64, 67, 0.1);
border-radius: 25px;
}
span{
font-size: 14px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand"
href="#">
<img src="#"
width="30" height="30" class="d-inline-block align-top" alt="">
Web site name
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active" title="home">
<a class="nav-link"
href="#"><svg
style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18"
role="img" viewBox="0 0 576 512">
<path fill="currentColor"
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
</path>
</svg> home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" title="link">
<a class="nav-link" href="#" target="_blank"><svg
style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="folder-plus"
class="svg-inline--fa fa-folder-plus fa-w-16" role="img" viewBox="0 0 512 512">
<path fill="currentColor"
d="M464,128H272L208,64H48A48,48,0,0,0,0,112V400a48,48,0,0,0,48,48H464a48,48,0,0,0,48-48V176A48,48,0,0,0,464,128ZM359.5,296a16,16,0,0,1-16,16h-64v64a16,16,0,0,1-16,16h-16a16,16,0,0,1-16-16V312h-64a16,16,0,0,1-16-16V280a16,16,0,0,1,16-16h64V200a16,16,0,0,1,16-16h16a16,16,0,0,1,16,16v64h64a16,16,0,0,1,16,16Z">
</path>
</svg> link</a>
</li>
<li class="nav-item" title="link">
<a class="nav-link"
href="#"><svg
style="width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="store-alt"
class="svg-inline--fa fa-store-alt fa-w-20" role="img" viewBox="0 0 640 512">
<path fill="currentColor"
d="M320 384H128V224H64v256c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V224h-64v160zm314.6-241.8l-85.3-128c-6-8.9-16-14.2-26.7-14.2H117.4c-10.7 0-20.7 5.3-26.6 14.2l-85.3 128c-14.2 21.3 1 49.8 26.6 49.8H608c25.5 0 40.7-28.5 26.6-49.8zM512 496c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V224h-64v272z">
</path>
</svg> link</a>
</li>
</ul>
<ul class="navbar-nav navbarDropdownHover">
<li class="nav-item dropdown" title="Services">
<a class="nav-link ropdown-toggle navbarDropdownFocus" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg
style="width: 24px; height: 24px;" class="gb_Ve" focusable="false" viewBox="0 0 24 24">
<path fill="currentColor"
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
</svg></a>
<div class="scrollbar dropdown-menu p-3" aria-labelledby="navbarDropdown">
<div class="d-flex flex-row bd-highlight">
<div class="py-2 px-4 bd-highlight icon-link rounded text-center collapsed"
data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false"
aria-controls="multiCollapseExample1"><svg style="width: 32px; height: 32px;"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="globe" class="svg-inline--fa fa-globe fa-w-16"
role="img" viewBox="0 0 496 512">
<path fill="currentColor"
d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z">
</path>
</svg><span> Change language </span>
</div>
<div class="py-2 px-4 bd-highlight icon-link rounded text-center collapsed"
data-toggle="collapse" href="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExample2"><svg style="width: 32px; height: 32px;"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust fa-w-16"
role="img" viewBox="0 0 512 512">
<path fill="currentColor"
d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z">
</path>
</svg><span>Dark mode</span></div>
<div class="py-2 px-4 bd-highlight icon-link rounded text-center"><svg
xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M20 0H492C503.046 0 512 8.9543 512 20V492C512 503.046 503.046 512 492 512H20C8.9543 512 0 503.046 0 492V20C0 8.9543 8.9543 0 20 0ZM312.25 183.25C320.417 183.25 328 183.833 335 185V142C330.333 139.667 323.5 138.5 314.5 138.5C286.667 138.5 265.167 150.583 250 174.75L249.25 143.5H204.25V414H250.5V222C261.333 196.167 281.917 183.25 312.25 183.25Z"
fill="currentColor"></path>
</svg><span>System R</span></div>
</div>
<div class="card card-body py-2 px-4 collapse" id="multiCollapseExample1">
<a class="dropdown-item text-center"
href="#"
tabindex="-1" aria-disabled="true"> language 2<svg
style="width: 32px; height: 16px; color: green;" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle"
class="svg-inline--fa fa-check-circle fa-w-16" role="img" viewBox="0 0 512 512">
<path fill="currentColor"
d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z">
</path>
</svg></a>
<a class="dropdown-item text-center"
href="#"
tabindex="-1" aria-disabled="true">English language</a>
</div>
<div class="card card-body py-2 px-4 collapse" id="multiCollapseExample2">
<div class="custom-control custom-switch dropdown-item" aria-labelledby="navbarDropdown">
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Normal mode/ Dark mode</label>
</div>
</div>
<div class="d-flex flex-row bd-highlight">
<div class="py-2 px-4 bd-highlight icon-link rounded text-center"><svg
style="width: 32px; height: 32px;" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="store-alt"
class="svg-inline--fa fa-store-alt fa-w-20" role="img" viewBox="0 0 640 512">
<path xmlns="http://www.w3.org/2000/svg" fill="currentColor"
d="M192 208c0-17.67-14.33-32-32-32h-16c-35.35 0-64 28.65-64 64v48c0 35.35 28.65 64 64 64h16c17.67 0 32-14.33 32-32V208zm176 144c35.35 0 64-28.65 64-64v-48c0-35.35-28.65-64-64-64h-16c-17.67 0-32 14.33-32 32v112c0 17.67 14.33 32 32 32h16zM256 0C113.18 0 4.58 118.83 0 256v16c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-16c0-114.69 93.31-208 208-208s208 93.31 208 208h-.12c.08 2.43.12 165.72.12 165.72 0 23.35-18.93 42.28-42.28 42.28H320c0-26.51-21.49-48-48-48h-32c-26.51 0-48 21.49-48 48s21.49 48 48 48h181.72c49.86 0 90.28-40.42 90.28-90.28V256C507.42 118.83 398.82 0 256 0z">
</path>
</svg><span>Emergency calls</span></div>
<div class="py-2 px-4 bd-highlight icon-link rounded text-center"><svg
style="width: 32px; height: 32px;" aria-hidden="true" focusable="false"
data-prefix="fas" data-icon="play" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512" class="svg-inline--fa fa-play fa-w-14">
<path fill="currentColor"
d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
class=""></path>
</svg><span>Video clips</span></div>
<div class="py-2 px-4 bd-highlight icon-link rounded text-center"><svg
style="width: 32px; height: 32px;" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question-circle"
class="svg-inline--fa fa-question-circle fa-w-16" role="img" viewBox="0 0 512 512">
<path fill="currentColor"
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z" />
</svg><span>Common questions</span></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>解决方案
在很多网站上搜索解决方案后，我终于找到了我在codingnepalweb上阅读并看到了CodingNepal写的一篇文章点击这里查看它 很简单它正在审查他编码的高级下拉菜单但它引起了我的注意他如何使用 javascript 和 css 切换下拉菜单的出现和消失 我只是尝试应用这个技巧，但我在 Bootstrap 上苦苦挣扎 所以我删除了一些代码 你可以看到以下代码行：
<a class="nav-link ropdown-toggle navbarDropdownFocus" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" id="navbarDropdown" href="#">
变成这样
<a class="nav-link adv-dropdown" href="#">
和
<div class="scrollbar dropdown-menu p-3" aria-labelledby="navbarDropdown">
变成这样
<div class="scrollbar dropdown-menu p-3 wrapper" aria-labelledby="navbarDropdown">
我只是简化了代码并添加了一些类：
.adv-dropdown.wrapper在我写的javascript的帮助下，在按钮和下拉菜单中
const adv_dropdown_menu = document.querySelector(".adv-dropdown");
const menu_wrapper = document.querySelector(".wrapper");
adv_dropdown_menu.onclick = (()=>{
menu_wrapper.classList.toggle("show");
tooltip.classList.toggle("show");
});
它只是工作:)
推荐阅读
- c# - 访问本地安全 WCF 服务返回错误 HTTP 错误 403.16 - 禁止
- javascript - 图像发送 - 套接字 C++ 服务器/Javascript 客户端
- python - 如何在 python 中“展平”张量积矩阵？
- javascript - GEOjson 未显示在我的地图 openlayers 中
- node.js - 访问 Amazon Alexa 控制台 console.log() 内容
- google-apps-script - 脚本仍在运行时无法让谷歌表格显示所选范围
- amazon-web-services - 当数据超过对象元数据限制时，如何建立 S3 对象的索引？
- java - 删除最后一个“.” 字符串中的字符/s，中间不删除
- javascript - RNFetchBlob 阻止了 firebase/firestore 调用反应原生
- python - 如何调用类中定义的函数？