使用 AngularJS 在侧边栏菜单中列出答案

【问题标题】：list in sidebar Menu with AngularJS使用 AngularJS 在侧边栏菜单中列出
【发布时间】：2023-04-08 17:36:01
【问题描述】：

我正在使用引导程序和 AngularJS，并且我有这段代码来制作侧边栏菜单，

<ul class="nav navbar-nav">

            <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a></li>
            <li class="active"><a href="#"><span class="glyphicon glyphicon-plane"></span> Active Link</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-cloud"></span> Link</a></li>

            <!-- Dropdown-->
            <li class="panel panel-default" id="dropdown">
                <a data-toggle="collapse" href="#dropdown-lvl1">
                    <span class="glyphicon glyphicon-user"></span> Sub Level <span class="caret"></span>
                </a>

                <!-- Dropdown level 1 -->
                <div id="dropdown-lvl1" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>

                            <!-- Dropdown level 2 -->
                            <li class="panel panel-default" id="dropdown">
                                <a data-toggle="collapse" href="#dropdown-lvl2">
                                    <span class="glyphicon glyphicon-off"></span> Sub Level <span class="caret"></span>
                                </a>
                                <div id="dropdown-lvl2" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li>

        </ul>

我的问题是，当我单击子级菜单时，它会将我重定向到 localhost/#dropdown-lvl1，而不是显示 div dropdown-lvl1，知道为什么会有这种行为吗？

【问题讨论】：

标签： html css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Angular 使用 url 中的 # 来进行路由，因为您有 <a data-toggle="collapse" href="#dropdown-lvl2"> 它会尝试转到该路由，以便在页面上向下滚动使用 $anchorScroll

【讨论】：