Question

点击“全部显示”我要显示所有元素，点击链接“上半场”，我想显示“abc”“def”和“ghi”。点击第二个链接“下半场”，我想显示“jkl”，“mno”和“pqr”。再次点击链接“show all”，我想展示一切。 “abc”，“def”，“ghi”，“jkl”，“mno”，“pqr”。

我发现并试图实施一些类似的问题。但我无法再显示隐藏的元素。

以下是代码示例：

当我点击“显示上半场”时，在JS中我这样做：

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'none';
document.getElementById("mno").style.display = 'none';
document.getElementById("pqr").style.display = 'none';

当我点击“全部显示”时，我正在这样做：

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'visible';
document.getElementById("mno").style.display = 'visible';
document.getElementById("pqr").style.display = 'visible';

但是这不能再显示隐藏的元素。

如果您需要任何进一步的信息，请与我们联系。

感谢。

Answer 1

CSS display property没有值visible。您应该使用block代替visible来显示隐藏的元素，如下所示。

document.getElementById("abc").style.display = 'block';
document.getElementById("def").style.display = 'block';
document.getElementById("ghi").style.display = 'block';
document.getElementById("jkl").style.display = 'block';
document.getElementById("mno").style.display = 'block';
document.getElementById("pqr").style.display = 'block';

Answer 2

尽量避免使用元素来完成这些任务。您可以使用ng-show或ng-if来实现它，并使用您在范围变量中设置的标志。

首先在控制器中创建范围变量。

angular.module('sample', []);
angular.module('sample').controller('sampleCtrl', ['$scope',function($scope) {
  $scope.displayAll = true;
  $scope.displayOne = true;
  $scope.displayTwo = true;

  $scope.toggleDisplayAll = function(){
       $scope.displayAll = true;
       $scope.displayOne = $scope.displayAll;
       $scope.displayTwo = $scope.displayAll;
  };
  $scope.toggleDisplayOne = function(){
     $scope.displayOne = true;
     $scope.displayTwo = false;
  };
  $scope.toggleDisplayTwo = function(){
     $scope.displayTwo = true;
     $scope.displayOne = false;
  };

}]);

现在将这些组件集成到您的html文件中。

    <body ng-app="sample">
     <div ng-controller="sampleCtrl">
       <button ng-click='toggleDisplayAll()'>Toggle All Display</button>
        <button ng-click='toggleDisplayOne()'>Toggle First Display</button>
        <button ng-click='toggleDisplayTwo()'>Toggle Second Display</button>
                    <nav class="navbar navbar-default">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" ><strong>Go quickly to: </strong></a>
                                </div>


                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul id="test1" class="nav navbar-nav">
                                        <li id="all_sep_branch" class="active"><a href="#" ng-click="load_data_for_branch('all_branch')">All branches </a></li>

                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">abc </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">def </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">ghi </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">jkl </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">mno </a></li>



                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">pqr </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">stu </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">vwln </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsdfs </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsddf</a></li>

                                    </ul>
                                </div>

 </div>  
  </body>

此处还有working example

编辑：我已更新了plunker并回答了解决您的CSS问题。

解释CSS为什么会爆炸： 这是因为您在<span>标记之间使用了<li>标记。这将打破<ul>和<li>标记之间的父子关系。当你只是范围变量时，你也使用$ scope.displayOne和$ scope.displayTwo作为函数。

单击时使用角度js或JS显示隐藏链接

2 个答案: