AngularJS点击菜单滚动到指定Div时无法仅展开目标Div求助

嘿，刚接触AngularJS遇到这种小问题很正常，我帮你捋捋解决方案~

你现在的核心问题是：点击顶部菜单时，所有Div都展开了，但实际应该只展开滚动到的那个Div，其余保持折叠。问题出在你的gotoDiv函数里，它现在把所有group的isOpen都设为true了，自然所有Div都会展开。我们来一步步修改：

第一步：修复gotoDiv函数的逻辑 #

打开你的index.js，把gotoDiv函数改成下面这样：

$scope.gotoDiv = function(x) {
  // 先把所有Div都关闭
  $scope.groups.forEach(a => {
    a.isOpen = false;
  });
  // 找到要跳转的那个Div，把它设为展开状态
  const targetGroup = $scope.groups.find(group => group.id === x.toString());
  if (targetGroup) {
    targetGroup.isOpen = true;
  }
  // 触发滚动到目标位置
  $location.hash('anchor' + x);
  $anchorScroll();
};

这里的逻辑很清晰：先关闭所有Div，再找到对应id的目标Div并展开它，最后调用Angular的$location和$anchorScroll实现滚动。

第二步：修复菜单的href属性 #

你的HTML里菜单的href有重复（写了两次href），这会导致默认跳转行为干扰，改成下面这样：

<a href ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]"> Go to Div {{x}} </a>

保留空的href是为了让它看起来像可点击的链接样式，同时不会触发默认跳转。

第三步：确认初始状态 #

你已经设置了$scope.groups[0].isOpen = true;，这个没问题，页面加载时第一个Div会展开，其余折叠，符合你的需求。

完整修改后的代码 #

HTML部分 #

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="js/index.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<style type="text/css">
.scroll-div { height: 100px; overflow: scroll; margin-top: 10px; }
.anchor { border: 2px dashed red; padding: 10px 10px 200px 10px; }
.my-fixed-header { }
.my-fixed-header > a { display: inline-block; margin: 5px 15px; }
</style>
<body ng-app="app">
<div ng-controller="AccordionDemoCtrl">
<div class="my-fixed-header">
<a href ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]"> Go to Div {{x}} </a>
</div>
<input type="text" ng-model="item.value" ng-change="onTextChange()">
<div class="scroll-div">
<div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | filter:item.value ">
<div class="parents" ng-click="open(group)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }} </div>
{{ group.content }}
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
</body>

index.js部分 #

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
$scope.oneAtATime = true;
$scope.open = function (item) {
$scope.groups.filter(a=> a ===item).forEach(a=>{
a.isOpen = !a.isOpen;
});
$scope.closeOthers(item);
}
$scope.onTextChange = function(item) {
if($scope.item.value){
$scope.groups.forEach(a=>{
a.isOpen = true;
});
}else{
$scope.groups.forEach(a=>{
a.isOpen = false;
});
$scope.groups[0].isOpen = true;
}
};
$scope.closeOthers = function (item) {
$scope.groups.filter(a=> a !==item).forEach(a=>{
a.isOpen = false;
});
}
$scope.gotoDiv = function(x) {
  // 关闭所有Div
  $scope.groups.forEach(a => {
    a.isOpen = false;
  });
  // 找到目标Div并展开
  const targetGroup = $scope.groups.find(group => group.id === x.toString());
  if (targetGroup) {
    targetGroup.isOpen = true;
  }
  // 滚动到目标位置
  $location.hash('anchor' + x);
  $anchorScroll();
};
$scope.groups = [
{ title: 'title 1', id:'1', list: ['<i>item1a</i> blah blah', 'item2a', 'item3a', 'item4a', 'item5a', 'item6a', 'item7a' ] },
{ title: 'title 2', id:'2', list: ['item1b', '<b>item2b </b> blah ', 'item3b'] },
{ title: 'title 3', id:'3', list: ['item1c', '<b>item2c </b> blah ', 'sss3c'] },
{ title: 'title 4', id:'4', list: ['<i>item1a</i> blah blah', 'item2a', 'item3a', 'item4a', 'item5a', 'item6a', 'item7a' ] },
{ title: 'title 5', id:'5', list: ['<i>item1a</i> blah blah', 'item2a', 'item3a', 'item4a', 'item5a', 'item6a', 'item7a' ] }
];
$scope.groups[0].isOpen = true;
});

这样修改后，点击顶部的任意菜单，就会自动滚动到对应的Div，并且只有这个Div是展开状态，其他Div都保持折叠啦~

内容的提问来源于stack exchange，提问作者carreankush