#javascript #html #jquery #css
Вопрос:
Я пытаюсь сделать расширенный выпадающее меню, и я застрял в проблеме, что, когда я нажимаю на любой элемент внутри меню Меню закроется, я использую Bootstrap 4.2.1 как там на картинке, красным отмечены места, которые я не хочу, чтобы при нажатии на них, чтобы закрыть выпадающее меню и зеленые насаждения, чего я хочу, когда они нажали на передовой dropdowne
Почему я хочу этого, как это, потому что что-то происходит в раскрывающемся меню, см. изображение для более подробной информации расширенным dropdowne рис. 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> Ответ №1:
После искал решение на многих сайтах, я наконец нашел его я читал и видел статью, написанную CodingNepal на codingnepalweb Нажмите здесь, чтобы посмотреть ее довольно просто изучает передовые раскрывающееся меню, которое он в нем код, но это привлекло мое внимание, как он перешел в раскрывающемся меню появляются и исчезают через 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");
});
Это просто работает 🙂