I have a Unordered List of items, the submenus of which I want to close/hide programmatically, when some other List item is clicked, be it another Mainmenu or another item. From the answers given, I made changes, which are now included.
I think I'm close, but no success on closing the sub unordered list, with
$(this).parent().next().slideToggle(200);
$(document).ready(function ()
{
var wasSubmenuClicked = false;
$('.dropdown-submenu a.HasDropDown').on("click", function (e)
{
//alert("here1");
wasSubmenuClicked = true;
$(this).parent().next('ul').toggle();
e.stopPropagation();
e.preventDefault();
if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-down'))
{
//alert("sub has down");
$(this).find('span').first().removeClass('glyphicon-circle-arrow-down');
$(this).find('span').first().addClass('glyphicon-circle-arrow-up');
}
else if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
{
//alert("sub has up");
$(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
$(this).find('span').first().addClass('glyphicon-circle-arrow-down');
}
if ($(this).hasClass(" clicked"))
{
$(this).removeClass(" clicked");
}
else
{
$(this).addClass(" clicked");
}
});
// Dropdown-toggle is on the <a under the li for mainmenu and
// on the <a element, beneath a <span> under the SubMenu <li
// this <a also has class-"HasDropDown dropdownToggle
// This function executes for sub-menu after the above function '.dropdown-submenu a.HasDropDown').on("click", function (e)'
$('.dropdown-toggle').on("click", function (e)
{
var isSubMenu = false;
var thisElement = $(this);
if ($(this).hasClass("HasDropDown"))
{
//alert("submenu HasDropDown"); // I.e. sub menu which has been clicked
isSubMenu = true;
if (wasSubmenuClicked == true)
{
//alert("check if clicked");
if ($(this).hasClass("clicked"))
{
//alert("was clicked");
$(this).removeClass("clicked");
// the sub-menu function handles the submenu arrows
// this function only clears all submenu up arrows if it is not ticked
}
}
}
else // It's a MainMenu item
{
// Clear any other sub menu items of "clicked", set all as down
$('.dropdown-submenu').each(function ()
{
if (wasSubmenuClicked == true)
{
if (!$(this).hasClass("clicked")) //set by submenu click before this event fires
{
if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
{
//alert("each submenu UpArrow");
$(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
$(this).find('span').first().addClass('glyphicon-circle-arrow-down');
$(this).parent().next().slideToggle(200);
}
else
{
//alert("each submenu DownArrow");
$(this).find('span').removeClass('glyphicon-circle-arrow-down');
$(this).find('span').addClass('glyphicon-circle-arrow-up');
}
}
else
{
//alert("subby not clicked");
}
}
});
// Main Menus
$('.dropdown-menu').each(function ()
{
//if (thisElement == $(this))
//{
if ($(this).find('span').first().hasClass('glyphicon-circle-arrow-up'))
{
//alert("each menu UpArrow");
$(this).find('span').first().removeClass('glyphicon-circle-arrow-up');
$(this).find('span').first().addClass('glyphicon-circle-arrow-down');
// Nope...It disappears a main menu
//$(this).parent().next().slideToggle(200);
}
else
{
thisElement.find('span').first().removeClass('glyphicon-circle-arrow-down');
thisElement.find('span').first().addClass('glyphicon-circle-arrow-up');
}
//}
//else
//{
//alert(" the each on Main found a match on this clicked main");
//}
});
// Now the Menu clicked on
alert("main menu itself clicked on");
if (thisElement.find('span').first().hasClass('glyphicon-circle-arrow-up'))
{
alert("Main menu UpArrow");
thisElement.find('span').first().removeClass('glyphicon-circle-arrow-up');
thisElement.find('span').first().addClass('glyphicon-circle-arrow-down');
}
else
{
alert("Main menu DownArrow");
thisElement.find('span').first().removeClass('glyphicon-circle-arrow-down');
thisElement.find('span').first().addClass('glyphicon-circle-arrow-up');
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="dropdown-submenu">
<span>
<a class="HasDropDown dropdown-toggle" style="color: gainsboro; background-color: black !important;" href="#">
<span class="glyphicon glyphicon-circle-arrow-up"></span> Fleet Management
</a>
</span>
<ul class="dropdown-menu" style="display: block;">
<li class="dropdown-submenu">
<a style="color: gainsboro; background-color: black !important;" href="/TCO/Edit">
TCO
</a>
</li>
<li class="dropdown-submenu">
<a style="color: gainsboro; background-color: black !important;" href="/Report/TCO">
Reports
</a>
</li>
<ul>
</li>
