Member_2_1242703
asked on
Multiple bootstrap dropdowns inside a bootstrap dropdown. Toggle issues
I have a navigation menu and the following is one of the items. The idea is that this menu item is a dropdown with (per the below code) 3 items in it. Each one of those items is also a dropdown, each with several items in them.
I've gone through several iterations of this and clearly am doing something wrong. The code below does not even expand the second level sub-menu items.
I was able to get those 2nd levels to expand by adding
Then specifying it from the first set of items in the initial dropdown, like so:
Which all works great actually, except that if another item in the same level is clicked, the other does not collapse. (i.e. If I click "Region 1" it expands fine, but then if I click "Region 3" it expands over "Region 1" instead of expanding Region 3/collapsing Region 1)
Anyway, I'm hopeful someone can look at this and say, yeah dummy, this is out of order or that needs to go here. Any ideas?
I've gone through several iterations of this and clearly am doing something wrong. The code below does not even expand the second level sub-menu items.
<ul class="nav navbar-nav nav_1">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams<span class="caret"></span></a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-submenu"><a href="#">Region 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=1">Team 1</a></li>
<li><a href = "teampage.aspx?ID=17">Team 17</a></li>
<li><a href = "teampage.aspx?ID=23">Team 23</a></li>
<li><a href = "teampage.aspx?ID=50">Team 50</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">Region 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=52">Team 52</a></li>
<li><a href = "teampage.aspx?ID=53">Team 53</a></li>
<li><a href = "teampage.aspx?ID=54">Team 54</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">Region 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=56">Team 56</a></li>
<li><a href = "teampage.aspx?ID=63">Team 63</a></li>
<li><a href = "teampage.aspx?ID=58">Team 58</a></li>
</ul>
</li>
</li>
</ul>I was able to get those 2nd levels to expand by adding
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
});
});
</script>Then specifying it from the first set of items in the initial dropdown, like so:
<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>Which all works great actually, except that if another item in the same level is clicked, the other does not collapse. (i.e. If I click "Region 1" it expands fine, but then if I click "Region 3" it expands over "Region 1" instead of expanding Region 3/collapsing Region 1)
Anyway, I'm hopeful someone can look at this and say, yeah dummy, this is out of order or that needs to go here. Any ideas?
ASKER
Turns out I did have an extra closing tag </li> in there. Still getting the same result though. Here's the updated code...
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams<span class="caret"></span></a>
<div>
<ul>
<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=1">Team 1</a></li>
<li><a href = "teampage.aspx?ID=17">Team 17</a></li>
<li><a href = "teampage.aspx?ID=23">Team 23</a></li>
<li><a href = "teampage.aspx?ID=50">Team 50</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#" class="test">Region 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=52">Team 52</a></li>
<li><a href = "teampage.aspx?ID=53">Team 53</a></li>
<li><a href = "teampage.aspx?ID=54">Team 54</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="test">Region 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=56">Team 56</a></li>
<li><a href = "teampage.aspx?ID=63">Team 63</a></li>
<li><a href = "teampage.aspx?ID=58">Team 58</a></li>
</ul>
</li>
</ul>
</div>
</li>
Another road block I just remembered because I ran into the same thing when I first started using Bootstrap3, there is only one level of drop downs. Their reasoning makes sense, Bootstrap is mobile first. If you are on a touch screen, you can't easily use nested drop downs.
Other's have asked and there are work arounds, here is one from w3schools that you can incorporate. https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
I ended up recreating some sites where I did the very same thing. Instead of having a multi level drop down, I went to one level and put sub menu's on those pages.
Other's have asked and there are work arounds, here is one from w3schools that you can incorporate. https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>I ended up recreating some sites where I did the very same thing. Instead of having a multi level drop down, I went to one level and put sub menu's on those pages.
ASKER
That actually is informative and I will check it out, but that example is for three levels of dropdowns. I only have 2 submenus. I'm not trying to add another level, just toggle the ones I already have. My only issue with functionality on any browser is that an open submenu wont collapse when another is opened. (These actually work fine on mobile devices)
When I run this code here http://jsbin.com/colerigofi/edit?html,output, it looks like the issue is clicking a region will toggle. However, if you toggle open a region, then click Teams, the region is not toggling closed. Is this what you are getting too?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<ul class="nav navbar-nav nav_1">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams<span class="caret"></span></a>
<div>
<ul>
<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=1">Team 1</a></li>
<li><a href = "teampage.aspx?ID=17">Team 17</a></li>
<li><a href = "teampage.aspx?ID=23">Team 23</a></li>
<li><a href = "teampage.aspx?ID=50">Team 50</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#" class="test">Region 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=52">Team 52</a></li>
<li><a href = "teampage.aspx?ID=53">Team 53</a></li>
<li><a href = "teampage.aspx?ID=54">Team 54</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="test">Region 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=56">Team 56</a></li>
<li><a href = "teampage.aspx?ID=63">Team 63</a></li>
<li><a href = "teampage.aspx?ID=58">Team 58</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>
</body>
</html>ASKER
I'm not so worried about what happens when a team gets clicked because it goes to another page. You're example is doing the same thing though. When you click a region, the team submenu opens. When you click another region, that correlating teams submenu opens and the previous submenu remains open on top or underneath the second one. In this same scenario, I want the first team submenu to collapse and the second clicked submenu to appear.
My experience with jquery is limited, so test this thoroughly but I came across this post while trying to solve the same problem.
I ended up resolving this in my case by changing the script as follows:
<script>
$(document).ready(function
$('.dropdown-submenu a.test').on("click", function(e){
$(this).parent().parent().
$(this).next('ul').toggle(
e.stopPropagation();
e.preventDefault();
});
});
</script>
Hopefully that's applicable to your issue as well. Good luck!
I ended up resolving this in my case by changing the script as follows:
<script>
$(document).ready(function
$('.dropdown-submenu a.test').on("click", function(e){
$(this).parent().parent().
$(this).next('ul').toggle(
e.stopPropagation();
e.preventDefault();
});
});
</script>
Hopefully that's applicable to your issue as well. Good luck!
I was trying to recreate the issue and asking you to verify, that is why it does the same. Here is similar code that validates (all elements that are open get closed in order). You will see it now works as what I believe is expected. Double check your live code to make sure every element closes properly and validates https://validator.w3.org and that should take care of your issue.
http://jsbin.com/xokaranica/edit?html,output
http://jsbin.com/xokaranica/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
});
});
</script>
<title>JS Bin</title>
</head>
<body>
<ul class="nav navbar-nav nav_1">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams<span class="caret"></span></a>
<div>
<ul>
<li class="dropdown-submenu"><a href="#" class="test">Region 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=1">Team 1</a></li>
<li><a href = "teampage.aspx?ID=17">Team 17</a></li>
<li><a href = "teampage.aspx?ID=23">Team 23</a></li>
<li><a href = "teampage.aspx?ID=50">Team 50</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#" class="test">Region 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=52">Team 52</a></li>
<li><a href = "teampage.aspx?ID=53">Team 53</a></li>
<li><a href = "teampage.aspx?ID=54">Team 54</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="test">Region 3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href = "teampage.aspx?ID=56">Team 56</a></li>
<li><a href = "teampage.aspx?ID=63">Team 63</a></li>
<li><a href = "teampage.aspx?ID=58">Team 58</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Figured it out
It may be just from your sample code, but it does not looks like your html closes properly. No closing div, the last closing html tags do not match anything. Work on fixing that, post back your example code, though fixing this may fix your issue.