I am displaying bootstrap dropdownmenu and on click of any parent dropdown value i am displaying other child dropdown. when i click on a value in dropdown ,the childmenu opens and when i click on next dropdown value ,the previous chidmenu dropdown is not closed.I want to close the previous childdropdown menu if any other value of parent menu is clicked.How to achieve this?Please help! Thanks in advance
Here is my code:
<div class="dropdown">
<ul id="ddlTest" class="ddltestdd dropdown-menu" role="menu">
@foreach (var item in (IEnumerable<SelectListItem>)ViewBag.testresults)
{
<li class="dropdown-submenu">
<span class="dropdown-toggle" data-toggle="dropdown">@item.Text</span>
<span class="testCaret" aria-hidden="true" style="float:right;margin-top:5px;">
</span>
<ul class="ddltestdd dropdown-menu dropup" role="menu" id="testorder_@item.Text">
<li>
<span class="TestBySubmenu">T1</span>
</li>
<li>
<span class="TestBySubmenu">T2</span>
</li>
</ul>
</li>
}
</ul>
</div>
Jquery:
var testText;
$(".dropdown-submenu").click(function () {
$(this).find(".dropdown-submenu").removeClass('open');
$(".dropdown-submenu:hover > .dropdown-menu").css('display', 'block');
testText;= $(this).text();
return false;
});
$('.dropdown-menu li span').click(function () {
var Allowpageload = testText;
if ((Allowpageload == "T1") || (Allowpageload == "T2")) {
//load page
$(".dropdown-submenu:hover > .dropdown-menu").css('display', 'none');
$('[id^="testorder_]').dropdown('toggle');
$('[data-toggle="dropdown"]').parent().removeClass('open');
}
Aucun commentaire:
Enregistrer un commentaire