Javascript Angularjs/HTML单击显示和隐藏li元素

我对“类别”及其下属列表的外观有问题

加载页面时不应显示列表。因此，用户只需点击一下即可看到。不幸的是，一旦选中复选框，这些列表项就会立即消失。这不应该发生。“类别”下的内容只应在单击“类别”一词时消失或可见

我需要做些什么改变才能让这一切如我想象的那样成功

以下是它所涉及的容器的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 -->

---

这里的问题是，您在包含的div上设置了ng click。因此，每次单击一个子项，都会触发ShowHideCategory（）函数

尝试将单击处理程序移动到实际单词：

<div class="cd-filter-block" value="Show Hide Elements">
  <h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
  [...]

---

这里的问题是，您在包含的div上设置了ng click。因此，每次单击一个子项，都会触发ShowHideCategory（）函数

尝试将单击处理程序移动到实际单词：

<div class="cd-filter-block" value="Show Hide Elements">
  <h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
  [...]

---

由于

li

项位于

div

内，因此每次单击div内的任何位置时都会调用

data ng click

方法。请尝试将它们分开。由于

li

项位于

div

内，每次单击div中的任何位置时，都会调用

data ng click

方法。请尝试将它们分开。

$scope.IsVisibleCategory = !$scope.IsVisibleCategory;