Question

我正在使用AngularJS中的移动网络应用程序，我遇到了一个涉及我要切换的隐藏内容的问题。

<div class="results row animated fadeInUp">

    <p class="center" ng-hide="tips_list">{{ 'NORESULTS' | translate }}</p>

    <ul class="list list-slideout small-12 columns">
        <li class="list-item" ng-style="speciesColor" ng-repeat="tip in tips_list | orderBy:'title' | filter:searchFilter" >
            <h2>{{ tip.title }}</h2>
            <div class="list-item-content" ng-bind-html="tip.body">
                {{ tip.body }}
            </div>
        </li>
    </ul>

</div>

上面的代码块显示了我的HTML视图。如您所见，使用ng-repeat动态加载数据。＆＃39; .LIST项内容＆＃39;有＆＃39;显示：无＆＃39;作为属性，当您点击/点按父级＆＃39; .list-item＆＃39;它将显示内容，这是我的控制器中的以下代码所做的。

$(document).on("click", ".tips .list-item", function() {

        $(this).children(".list-item-content").slideToggle();
        //$(this).children(".list-item-content").stop(true).slideToggle();

        // scroll to top of clicked element with fast animation
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 400);
    });

我正在使用jQuery，我还想添加一个slideOut动画，所以我使用了slideToggle。我还滚动到父元素的顶部，以便用户更容易阅读内容（删除它不能解决我的问题）。

现在的问题是，当我点击/点击列表项时，它有时会在向下滑动后向上滑动，从而无法查看内容。这在重新加载页面时总是固定的，但是当进入具有类似布局的不同页面时，我通常会遇到同样的问题。

我尝试过的事情：

添加＆＃39; .stop（true）＆＃39;到slideOut函数。所有这一切都改变了这个问题。根本没有滑动＆＃39;
使用没有动画的常规切换。与上述问题相同。
将classToggle与＆＃39;隐藏＆＃39;类同时使用＆＃39;隐藏＆＃39;和＆＃39;显示＆＃39;类
手动检查元素的display属性，然后使用.css（）函数正确更改css。
删除父div上的fadein动画（没有做任何事情）

当我使用Chrome开发者工具检查元素时，我注意到他简要地将内联样式更改为显示：block＆＃39;但随后立即恢复到显示：无＆＃39;。

我很难找到任何关于这个问题的帖子，所以如果我错过了一个类似的帖子（可能是因为我没有按照正确的条款搜索），请告诉我。

这是我关于Stackoverflow的第一个问题，只是想让你知道这个网站过去帮了我很多（希望社区再次帮助我）。

TL：DR：在AngularJS中生成的内容上切换显示（使用jQuery）的问题

Answer 1

我设法通过使用角度ng-click替换on（＆＃34; click＆＃34;）函数来解决我的问题。

更新了视图：

<div class="results row animated fadeInUp">

    <p class="center" ng-hide="tips_list">{{ 'NORESULTS' | translate }}</p>

    <ul class="list list-slideout small-12 columns">
        <li class="list-item" ng-style="speciesColor" ng-repeat="tip in tips_list | orderBy:'title' | filter:searchFilter" ng-click="showContent($index)" id="item-{{$index}}">
            <h2>{{ tip.title }}</h2>
            <div class="list-item-content" ng-bind-html="tip.body">
                {{ tip.body }}
            </div>
        </li>
    </ul>

</div>

更新了控制器功能

$scope.showContent = function(id){

        var elementToShow = '#item-' + id;

        $(elementToShow).children(".list-item-content").slideToggle();

        // scroll to top of clicked element with fast animation
        $('html, body').animate({
            scrollTop: $(elementToShow).offset().top
        }, 400);

    }

我没有获取所点击项目的子项，而是使用angular＆＃34; $ index＆＃34;为打印的项目添加了唯一ID。变量

我仍然使用jQuery slideToggle函数，但现在是bug（项目停留在＆＃34; display：none＆＃34;已经消失。

显然，打印的ng-repeat元素上的jQuery点击事件肯定存在问题。

让我知道，如果这个问题足够相关，可以留在这里，也许有些人可以进一步评论这个问题，并改善这个答案。

角度切换内容显示问题

1 个答案: