Question

单击按钮时，必须动态删除div元素中的“in”类。

`<div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
    <div id="demo" class="collapse in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    </div>
</div>`

Answer 1

以下是示例代码。

<强>解释

在此示例中，in类将元素渲染为粗体。

一个非常简单的指令onclick-toggle-class被声明为元素的属性，它绑定了这个元素上的onclick事件，并添加/删除了在param中传递的css类（我们使用指令属性值）。 / p>

＆＃13;

angular.module('app', []);

angular.module('app').directive('toggleNextElementClass', function() {
  return {
      restrict: 'A',
      link: function(scope, element, attrs) {
      	  element.bind('click', function() {
      	  	// get next element
      	  	var nextElement = element[0].nextElementSibling;
      	  	if(nextElement) {
      	  	angular.element(nextElement).toggleClass(attrs.toggleNextElementClass);
      	  	}
          });
      }
  };
});

＆＃13;

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
<style>
.collapse { display: none; }
.in { display: block; }
</style>
</head>

<body>

<div class="container">
    <h2>Simple Collapsible</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" toggle-next-element-class="in">Simple collapsible</button>
    <div class="collapse in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    </div>
</div>


</body>
</html>

＆＃13;

如何仅在单击时动态删除引导程序中内置类的'in'动态

1 个答案: