Question

我正在尝试实现一种隐藏/显示组内div的机制，这意味着我只想为该组显示一个div。当然，我可以使用ng-show指令实现它，但我希望有更通用的东西。

例如：

<div div-group="mygroup">
  <div id="div1"> ... </div>
  <div id="div2"> ... </div>
  <div id="div3"> ... </div>
</div>

如果我调用showDiv（“div1”）之类的函数，则会隐藏其他div（div2和div3）。我想在根范围上添加一个包含所有内部div状态（显示或隐藏）的对象。

非常感谢你的帮助！亨利

Answer 1

一种方法可能是使用ng-class

.show{
display:block
}

.hide{
display:none;
}

<div div-group="mygroup">
  <div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div>
  <div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div>
  <div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div>
</div>

$scope.choose=function(id){
$scope.selecteddiv=id;
}

所以你可以在函数
中传递正确的id作为字符串

Answer 2

如果您想在vanilla js中执行此操作，您可以像这样编写showDiv函数

function showDiv(id) {
  //hide all divs
  document.findElementById('div1').style.display = 'none';
  document.findElementById('div2').style.display = 'none';
  document.findElementById('div3').style.display = 'none';
  //show just the div you want
  document.findElementById(id).style.display = 'block'; //or whatever it was before
}

实现div组隐藏/显示

2 个答案: