Question

我正在显示bootstrap dropdownmenu，点击任何父下拉列表我显示其他子下拉列表。当我点击下拉列表中的值时，子菜单打开，当我点击下一个下拉值时，前一个chidmenu下拉列表没有关闭。如果点击任何其他父菜单值，我想关闭上一个子下拉菜单。如何实现这个？请帮忙！提前致谢

这是我的代码：

<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');
            }

Answer 1

在阅读完代码之后，我认为您没有正确安排课程以使其正常工作。我在这里有一个很好的例子：

Jsfiddle

你的第一个<li> tag不应该有dropdown submenu。相反，它是您应该拥有它的嵌入式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="testorder_@item.Text">
                    <li>
                        <span class="TestBySubmenu">T1</span>
                    </li>
                    <li>
                        <span class="TestBySubmenu">T2</span>
                    </li>
                </ul>
            </li>
        }
    </ul>
</div>

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

1 个答案:

Jsfiddle