我对“类别”及其下属列表的外观有疑问。
加载页面时不应显示列表。因此，只有通过单击用户才能看到。不幸的是，一旦选中一个复选框，这些列表项就会立即消失。那不应该发生。单击“类别”一词时，“类别”下的内容应仅消失或可见。
要使这项工作如我所想的那样，我必须进行哪些更改？
这是关于它的容器的HTML：
<div class="cd-filter-block" value="Show Hide Elements" data-ng-click="ShowHideCategory()" >
<h4 >Kategorien</h4>
<ul class="cd-filter-content cd-filters list" ng-show="IsVisibleCategory">
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Rind" data-ng-false-value="">
<label class="checkbox-label"> Rind </label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Geflügel" data-ng-false-value="">
<label class="checkbox-label">Geflügel</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schwein" data-ng-false-value="">
<label class="checkbox-label">Schwein</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schaf" data-ng-false-value="">
<label class="checkbox-label">Schaf</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Wild" data-ng-false-value="">
<label class="checkbox-label">Wild</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Ziege" data-ng-false-value="">
<label class="checkbox-label">Ziege</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Pferd" data-ng-false-value="">
<label class="checkbox-label">Pferd</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Alpaka" data-ng-false-value="">
<label class="checkbox-label">Alpaka</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Fisch" data-ng-false-value="">
<label class="checkbox-label">Fisch</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Kaninchen" data-ng-false-value="">
<label class="checkbox-label">Kaninchen</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Mineral" data-ng-false-value="">
<label class="checkbox-label">Mineralfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Einzel" data-ng-false-value="">
<label class="checkbox-label">Einzelfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Spezial" data-ng-false-value="">
<label class="checkbox-label">Spezialfutter</label>
</li>
<li class="reset">
<p><strong><a href="" data-ng-click="resetFilters()" class="show-all"><i class="fa fa-undo" aria-hidden="true"></i> Filter zurücksetzen</a></strong></p>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
以下是脚本文件的摘录：
app.controller('PageCtrl', ['$scope', 'filterFilter', '$http', function ($scope, filterFilter, $http) {
$scope.items =[];
$http.get("document.json").success(function(response){
$scope.items = response; //ajax request to fetch data into $scope.data
// pagination controls
$scope.currentPage = 1;
$scope.totalItems = $scope.items.length;
$scope.entryLimit = 200; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.orderByField = 'evaluation_result';
$scope.reverseSort = true;
$scope.IsVisibleCategory = false;
&scope.IsVisibleSubCategory = false;
&scope.IsVisibleComposition = false;
&scope.IsVisibleAnteile = false;
$scope.ShowHideCategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleCategory = $scope.IsVisibleCategory ? false : true;
};
$scope.ShowHideSubcategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleSubcategory = $scope.IsVisibleSubcategory ? false : true;
};
$scope.ShowHideComposition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleComposition = $scope.IsVisibleComposition ? false : true;
};
$scope.ShowHideAnteile = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleAnteile = $scope.IsVisibleAnteile ? false : true;
};
});
最佳答案
这里的问题是，您在包含的div上设置了ng-click。因此，每次点击孩子，都会触发ShowHideCategory（）函数。
尝试将点击处理程序移至实际单词：
<div class="cd-filter-block" value="Show Hide Elements">
<h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
[...]
旁注，与您的问题无关
在ShowHide函数中，您可以对代码进行一些优化：
$scope.IsVisibleCategory = !$scope.IsVisibleCategory;
关于javascript - AngularJS/HTML显示和隐藏li元素onClick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47474706/