Я экспериментировал с конкретным сайтом, и все выглядит именно так, как я хочу. У меня есть выпадающее меню, в котором есть выбор. Затем у меня есть подменю, которое открывается при нажатии. Мне нужно иметь подменю в верхней части выпадающего меню, которое оно делает. Затем мне нужно закрыть подменю при щелчке, где находится ссылка «Вернуться в меню», но оставить раскрывающийся список открытым.
Я попал в точку, где ссылка «Вернуться в меню» незакрыть все раскрывающееся окно, но оно просто ничего не делает, где раньше, оно закрывало полное раскрывающееся окно каждый раз, когда я щелкаю по нему.
Другая проблема возникает, когда я нажимаю на одну из других ссылок в подменю. , он работает нормально, закрывая выпадающее меню, но при нажатии на кнопку выпадающего меню он не обновляется и продолжает показывать подменю.
Не уверен, что это можно сделать, и я достаточно новичок в JSи я довольно много играл с настройками JS. Нынешний JS может быть неправильным, поэтому проигнорируйте это или мне придется немного его отрегулировать. Я создал скрипку, чтобы показать вам, что я имею в виду, и если это невозможно, я ценю время и усилия, чтобы помочь мне.
Вот мой код.
HTML
window.onload=function(){
//Dropdown Start
$(document).ready(function() {
$('.dropdown-menu a.dropdown-list').on("click", function(e) {
$(this).parent().parent().find('.dropdown-list').show();
$(this).next('li').toggle();
e.stopPropagation();
});
});
// Dropdown End
}
/* Body Start */
body {
background-color: #b3d1ff ;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Body End */
/* ============================================================================ */
/* Navbar Start */
.nav-text {
color: #000 !important;
font-size: 14px;
margin-bottom: 5px;
}
.navbar {
background: rgba (153, 153, 153, 0.5);
position: fixed;
height: 45px;
bottom: 0;
left: 0;
width: 100% !important;
}
.navbar .right-text {
float: right;
margin: 0;
margin-right: 10px;
}
/* Navbar End */
/* ============================================================================ */
button:focus {
outline: none !important;
}
.button {
background: transparent !important;
background-color: transparent !important;
border: none;
}
.dropup {
left: 0 !important;
}
.dropdown-menu.columns-2 {
min-width: 600px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.3-column-drop {
list-style: none !important;
}
.3-column-drop li a {
display: inline-block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
ul {
list-style-type: none;
}
/* Dropside Start */
.dropside-submenu {
position: relative;
}
.dropside-submenu .dropdown-menu {
width: 740px !important;
height: 340px !important;
top: 0;
left: -548px !important;
background-color: #d9d9d9;
}
/* Dropside End */
/* Dropup End */
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://www.denlyncomputers.com.au/test/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://www.denlyncomputers.com.au/test/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://www.denlyncomputers.com.au/test/styles.css">
<script type="text/javascript" src="https://www.denlyncomputers.com.au/test/custom.js"></script>
<style id="compiled-css" type="text/css">
/* Dropup Start */
.dropdown-menu {
width: 740px !important;
height: 350px !important;
margin-bottom: 7px !important;
margin-left: 1px !important;
background-color: #d9d9d9;
}
</style>
</head>
<body>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Navbar Start -->
<div class="os">
<div class="navbar">
<!-- Menu Start -->
<div class="dropup show">
<button class="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="https://www.denlyncomputers.com.au/test/start-here.png" width="30" height="30" title="">
</button>
<div class="dropdown-menu multi-column columns-3 show" aria-labelledby="dropdownMenuButton">
<div class="col-12">
<div class="row">
<div class="col-4">
<ul class="3-column-drop">
<li>
<h5>Section1</h5>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div class="col-4">
<ul class="3-column-drop">
<li>
<h5>Section2</h5>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div class="col-4">
<ul class="3-column-drop">
<!-- ====================================== -->
<!-- Start of Dropside Issue -->
<!-- ====================================== -->
<div class="dropside-submenu">
<a class="dropdown-item dropdown-list" href="#">
<h5> Go To Submenu
<img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item dropdown-list">
<h5> Return to Menu
<img src="https://www.denlyncomputers.com.au/test/arrow.png" width="10" height="11"></h5>
</a>
</li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
</ul>
</div>
<!-- ====================================== -->
<!-- End of Dropside Issue -->
<!-- ====================================== -->
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Menu End -->
<!-- Navbar End -->
</body></html>
https://jsfiddle.net/Denlyn/9hbLgd80/