Jquery 角度切换内容显示问题

我正在AngularJS开发一个移动web应用程序，我陷入了一个涉及隐藏内容的问题，我想切换

<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>

我使用jQuery来实现这个功能，我还想添加一个幻灯片输出动画，所以我使用了slideToggle。我还可以滚动到父元素的顶部，以便于用户阅读内容（删除此项并不能解决我的问题）

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

我尝试过的事情：

<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>

• 正在将“.stop（true）”添加到SlideOutout函数。所有这些都将问题从“向后滑动”改为“根本不滑动”
• 使用不带动画的常规切换。与上述问题相同
• 将classToggle与“隐藏”类以及“隐藏”和“显示”类一起使用
• 手动检查元素上的display属性，然后使用.css（）函数适当地更改css
• 删除父div上的fadein动画（未执行任何操作）

当我使用Chrome开发者工具检查元素时，我注意到他将内联样式短暂更改为“display:block”，但随后立即恢复为“display:none”

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

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

---

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

我用angular ng click替换了on（“click”）函数，从而解决了我的问题

更新视图：

<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>

我没有获取单击项的子项，而是使用角“$index”变量向打印项添加了唯一id

我仍然使用jqueryslidetoggle函数，但是现在bug（项目停留在“display:none”中）消失了

显然，打印的ng repeat元素上的jqueryclick事件一定存在一些问题

---

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

你可以设置Plunker吗？我没有设置Plunker/JSFIDLE等的经验。尝试和我的项目完全一样设置它似乎很棘手。如果有具体的问题，我很乐意回答回答虽然如此。只是当人们可以尝试和实验代码时，他们更容易提供帮助。

$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);

    }