Question

我有以下div：

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

这个div是隐藏的，当窗口很小时，使用bootstrap class＆＃39; hidden-xs＆＃39;，但是当用户点击按钮时我需要显示/隐藏这个div。我是网络新手，所以问题是如何通过使用角度，引导程序以适当的方式做到这一点......

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>

Answer 2

＆＃13;

<button onclick="myfunction()">Hide/Show</button>

<div id="myDIV">
This is my DIV element.
</div>
<script>
function myfunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

＆＃13;

Answer 3

要仅使用javascript切换显示，您可以尝试使用

https://codepen.io/anon/pen/xrdKEM

＆＃13;

function myFunction() {
  var toggle = document.getElementsByClassName('margin-bottom')[0];
  toggle.style.display = toggle.style.display == "none" ? "block" : "none";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin-bottom hidden-xs">
  <h1>hello world</h1>
</div>
<input type="button" value="hide and show" onclick="myFunction()">

＆＃13;

Answer 4

可以使用javascript轻松完成

＆＃13;

function myFunction() {
    var x = document.getElementById('showHide');
    if (x.style.opacity === '0') {
        x.style.opacity = '1';
    } else {
        x.style.opacity = '0';
    }
}

＆＃13;

<div id="showHide" class="margin-bottom hidden-xs" onclick="myFunction()">
  This is my DIV element.
</div>

＆＃13;

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

4 个答案: