javascript - 单击按钮时显示/隐藏 div 元素

Question

我有以下 div:

<div class="margin-bottom hidden-xs"></div>

当使用 Bootstrap 类“hidden-xs”窗口较小时，此 div 是隐藏的，但我需要在用户单击按钮时显示/隐藏此 div。我是网络新手，所以问题是如何以正确的方式使用 Angular 、 Bootstrap ...

Answer 1

使用 ng-click。在您的 ng 单击中，您可以从变量显示中切换值。指令 ng-show/ng-hide 在 css 上工作。如果您需要从 DOM 中删除元素，请使用 ng-if 而不是 ng-show

JS

$scope.display = true;
$scope.switch = function(){
    $scope.display =! $scope.display;
}

HTML

<div class="margin-bottom hidden-xs" ng-show="display"></div>

<button class="btn btn-primary btn-xs" ng-click="switch()">Click me !</button>

或者如果您不需要 javascript。

HTML

<div ng-init="display = true">
<div class="margin-bottom hidden-xs" ng-show="display"></div>

    <button class="btn btn-primary btn-xs" ng-click="display =! display">Click me !</button>
</div>