twitter-bootstrap - 引导下拉菜单链接问题

Question

我创建了一个下拉菜单，可以在这个Fiddle中看到

<div id="navbarContainer" class="container-fluid">
            <nav class="navbar">
                <div class="navbar-inner">
                    <ul class="nav">
                        <li class="dropdown" data-toggle="tab">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Adult
                                <i class="caret"></i>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/">AL4 Participant Record</a></li>
                            </ul>
                        </li>
                        <li class="dropdown" data-toggle="tab">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-target="#"  href="#">Youth
                                <i class="caret"></i>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/Home/Youth">YS2</a></li>
                            </ul>
                        </li>
                        <li data-toggle="tab"><a class="course" href="/Course">Courses</a></li>
                    </ul>
                </div>
            </nav>
        </div>

当我单击 Youth 菜单下的 YS2 时，我想导航到实际的 url - 我如何实现这一点？

Answer 1

您需要从外部 li 中删除 data-toggle="tab"。

完成后，该菜单的 html 应该如下所示。

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#"  href="#">Youth
       <i class="caret"></i>
    </a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="/Home/Youth">YS2</a></li>
    </ul>
</li>