单击后仅删除按钮的边框底部

Question

我想在点击按钮后删除按钮的下边框。按钮不是提交按钮。当我第二次点击它时，边框应为1px;有人可以帮我实现这个

Answer 1

如果您有1个按钮，它应该像这样简单：

单个按钮的角度

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
  $scope.hideBorder = false;
  $scope.toggleBorder = function () {
    $scope.hideBorder = !$scope.hideBorder;

  }
}]);

单个按钮的HTML

<button class="{{hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder()">Click Me</button>

CSS

button {
  border: 1px solid black;
  outline: none;
}
.button--no-bottom-border {
  border-bottom: 0px;
}

如果你有多个按钮，你的Angular＆amp; HTML会略有变化：

多个按钮的角度

$scope.toggleBorder = function (button) {
    button.hideBorder = !button.hideBorder;
  }
$scope.buttons = [
  {
    text: "Click Me",
    hideBorder: false
  },
  {
    text: "Click Me 2",
    hideBorder: false
  },
  {
    text: "Click Me 3",
    hideBorder: false
  },
];

多个按钮的HTML

<button class="{{button.hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder(button)" ng-repeat="button in buttons">Click Me</button>