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

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

javascript jquery html angularjs

Javascript 使用角度js或单击时使用js显示隐藏链接,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,单击“全部显示”我想显示所有元素，单击链接“上半部分”，我想显示“abc”、“def”和“ghi”。点击第二个链接“下半场”，我想显示“jkl”、“mno”和“pqr”。再次点击“全部显示”链接，我想显示所有内容。“abc”、“def”、“ghi”、“jkl”、“mno”、“pqr” 我发现了一些类似的问题，并试图实现这些问题。但我无法再次显示隐藏的元素以下是代码示例：当我单击“显示前半部分”时，在JS中我正在执行以下操作： document.getElementById("abc").st

单击“全部显示”我想显示所有元素，单击链接“上半部分”，我想显示“abc”、“def”和“ghi”。点击第二个链接“下半场”，我想显示“jkl”、“mno”和“pqr”。再次点击“全部显示”链接，我想显示所有内容。“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';

再次单击“全部显示”时，我正在执行以下操作：

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

但这无法再次显示隐藏的元素

如果你需要进一步的信息，请告诉我

谢谢。

没有可见的

值。您应该使用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';

没有可见的值
。您应该使用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';

试着避免在类似这样的任务中使用元素。您可以通过使用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>


切换所有显示
切换第一显示
切换第二显示
切换导航













这里还有
编辑：我已更新了plunker和答案，以解决您的css问题
解释CSS崩溃的原因：
这是因为您在
标记之间使用了
标记。这将破坏
和
标记之间的父子关系。另外，当$scope.displayOne和$scope.displayTwo只是作用域变量时，您也在使用它们作为函数。
尝试避免为类似的任务使用元素。您可以通过使用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>


切换所有显示
切换第一显示
切换第二显示
切换导航













这里还有
编辑：我已更新了plunker和答案，以解决您的css问题
解释CSS崩溃的原因：
这是因为您在
标记之间使用了
标记。这将破坏
和
标记之间的父子关系。另外，当$scope.displayOne和$scope.displayTwo只是作用域变量时，您使用它们作为函数。
使用ng model
而不是使用document.getElementById（“def”）.style.display
？angularjs专门提供了一些指令来显示和隐藏元素。。但我对这件事还不熟悉所以。。也许我不知道。我的问题已经解决了，但如果你能给我任何链接，这将是非常有帮助的我。我还将尝试更多地了解这种角度指令。和。我应该写一个例子吗？是的，使用带有范围标志的ng show。如果您使用的是angular，这将更有意义。@JK_Jha请检查我下面的答案，以实现同样的目标。您是否愿意使用ng model
而不是document.getElementById（“def”）.style.display
？angularjs专门提供了一些指令来显示和隐藏元素。。但我不知道