如何在单击下拉菜单的其他菜单时隐藏Boostrap下拉子菜单？

Question

我正在展示bootstrap下拉菜单，当我点击任何一个父级下拉值时，我会显示其他子级下拉菜单。 当我在下拉列表中点击一个值时，子菜单将打开，当我再次点击下一个下拉列表值时，上一个子级下拉列表不会关闭。 如果单击父菜单的其他值，则希望关闭上一个子级下拉菜单。如何实现这一点？ 请帮忙！ 提前致谢。

以下是我的代码：

<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="[e-mail]">
                    <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');
            }

- user3479588

Answer 1

阅读您的代码后，我认为您未正确安排类以使其正常工作。这里有一个子菜单的好例子：

Jsfiddle

您的第一个 <li> 标签 不应该有那里的 下拉菜单子菜单。相反，应该是您嵌入的 ul 标签拥有它

<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="[e-mail]">
                    <li>
                        <span class="TestBySubmenu">T1</span>
                    </li>
                    <li>
                        <span class="TestBySubmenu">T2</span>
                    </li>
                </ul>
            </li>
        }
    </ul>
</div>

- Coding Enthusiast