Question

首次点击后是否可以修复下拉列表项？我正在使用bootstrap，并创建了一个包含两个菜单项的标题。我想，如果用户点击第一个菜单项，那么它将被打开，直到他/她点击第二个菜单项为止。

这是件事，我已经准备好了。以下代码将在网页的顶部位置生成固定标题，其中包含两个名为Menu1和Menu2的菜单项

Menu1有5个子菜单项，将以水平列表显示。

    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topmenu">
            <div class="container-fluid">
                <div class="navbar-header">
                    <img src="~/Content/img/logo.png" style="padding-top:6px" class="pull-left" />

                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" data-toggle="collapse" data-target="#one">Menu1</a>
                        </li>

<li class="dropdown">
                            <a href="#" data-toggle="collapse" data-target="#one">Menu2</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="panel navbar-inverse" id="submenu">
                <ul class="nav navbar-nav collapse" id="one">
                    <li>@Html.ActionLink("Submenu1", "Submenu1", "Submenu1Controller")</li>
                    <li>@Html.ActionLink("Submenu2", "Submenu2", "Submenu2Controller")</li>
                    <li>@Html.ActionLink("Submenu3", "Submenu3", "Submenu3Controller")</li>
                    <li>@Html.ActionLink("Submenu4", "Submenu4", "Submenu4Controller")</li>
                    <li>@Html.ActionLink("Submenu5", "Index", "Home")</li>
                </ul>
            </div>

        </nav>


        <div class="container-fluid body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My Website</p>
            </footer>
        </div>
    </body>

    slight adjustments to the .panel css in bootstrap.css file to make

    .panel {
      margin-bottom: 0px; 
      background-color: #fff;
      border: .5px solid transparent;
      border-radius: 4px;
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
              box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

现在我想要的是，当用户点击menu1然后它将显示相关的子菜单项并且列表将保持打开（不折叠）单位，除非用户点击Menuitem2。

这意味着在第二次或下次尝试时，如果他/她再次单击Menu1或单击menu1下任何相关的SubMenu项目，则列表将保持打开状态而不会折叠。

如何修复bootstrap中的下拉列表

0 个答案: