How to hide Boostrap Dropdown submenu when another dropdown menu is clicked?

I am showing bootstrap dropdownmenu and on click of any parent dropdown. I am showing a dropdown menu of another. when I click on a value in the dropdown the child window opens and when I click on the next value in the dropdown the previous chidmenu dropdown does not close. I want to close the previous child menu if any other value of the parent menu is clicked. How do you 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');
            }

      

+3


source to share


1 answer


After reading your code, I think you are not organizing the classes correctly to make it work. I have a good example for a submenu here:

Jsfiddle




your first <li> tag

shouldn't have dropdown submenu

which he has. Instead, this is your inline tag ul

that should have it

<div class="dropdown">
    <ul id="ddlTest" class="ddltestdd dropdown-menu" role="menu">
        @foreach (var item in (IEnumerable<SelectListItem>)ViewBag.testresults)
        {
            <li>
                <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 sub-menu" role="menu" id="testorder_@item.Text">
                    <li>
                        <span class="TestBySubmenu">T1</span>
                    </li>
                    <li>
                        <span class="TestBySubmenu">T2</span>
                    </li>
                </ul>
            </li>
        }
    </ul>
</div>

      

+2


source







All Articles