Clash Royale CLAN TAG#URR8PPP

Bootstrap dropdown submenu closing upstream submenu

I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.

open

open

I've tracked it down to this JS:

$(function()

$('li.dropdown-submenu').on('click', function(event)
event.stopPropagation();
if ($(this).hasClass('open'))
$(this).removeClass('open');
else
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');

);
);


This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.

Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.

$(document).ready(function()
$('.dropdown-submenu a').on("click", function(e)
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
);


Need the best of both here!

3 Answers
3

I think you almost had it, you just needed to look for the different clicks.

The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.

a

test

test

<script>
$(document).ready(function()
$('.dropdown-submenu a').on("click", function(e)
if ($(this).hasClass('test'))
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
else
$('.dropdown-submenu ul').hide();

);
);
</script>


Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA

Maybe this is what are you looking for.

This code to close submenu when clicking another submenu.

Javascript

$(document).ready(function()
$('.dropdown-submenu a.test').on("click", function(e)

/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function()
$(this).hide();
);

/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function()
if($(this).next("ul").is(":visible"))
$(this).next("ul").hide();

);

$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
);


And JSFiddle example : https://jsfiddle.net/synz/vasho634/

I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want

$(document).ready(function()
$('.dropdown-submenu a.test').on("click", function(e)

siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block")
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();

$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.