【问题标题】:hrefs with anchor scroll inside a dropdown在下拉列表中带有锚滚动的href
【发布时间】:2017-07-03 21:56:11
【问题描述】:

我有一个这样的下拉菜单:

<div class="dropdown">
        <select>
            <option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
        </select>
</div>

基本上,下拉元素的名称在一个数组中,并且 html 中有 id 为 i.id 的 div,如下所示:

<div class="right-bar">
                <section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
                    <div class="description">{{i.deptname}}</div>
                    <div class="inner-block">
                        <div ng-repeat="j in i.cgs">
                            <img class="vertical-image" src="frame.png">
                            <img class="horizontal-image" src="mobileframe.png">
                        </div>
                    </div>
                </section>
            </div>

每当我单击下拉元素时,我希望它滚动到特定部分。但是当我这样做时,什么也没有发生。为什么会这样?当我尝试在 chrome 中检查元素时,它甚至没有在 ng-repeat 下拉列表中显示标签。

【问题讨论】:

  • 我认为您不需要在ng-href 指令中使用该插值,即尝试ng-href="i.id"
  • @wilusdaman 没用。奇怪的是,当我在 chrome 上使用检查元素时,它甚至没有显示 标签
  • 明白了。这并不让我感到惊讶;输入并不真正用于这样的目的。我鼓励您使用基于列表的下拉菜单以获得更一致的行为。如果您使用的是 css 库,它几乎肯定会为您提供一个,如果没有,请查看this out

标签: html css angularjs


【解决方案1】:

你应该使用 Angular 的$anchorScroll

请看一下这个类似的问题:How to handle anchor hash linking in AngularJS

【讨论】:

  • 这在我使用
    • 时有效,但在
  • 你是怎么做到的? &lt;option&gt; 标签应该有一个ng-click 属性,它会调用负责锚导航的控制器方法。
  • 【解决方案2】:

    嗯,我的建议似乎完全不相关,因为我是 AngularJS 的傻瓜。但我有一个使用 jQuery 滚动到某个部分的解决方案。您可以简单地为该部分提供一个 ID 并通过计算顶部偏移量并将滚动顶部动画到该点来动画滚动到该点...如果您希望我向您展示代码,我很乐意这样做... :-)(哦,我知道这应该是评论,因为它不能直接回答问题,但我的声誉是 13,所以我不能评论)...

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签