【问题标题】：remove only border bottom of the button after clicking单击后仅删除按钮的边框底部
【发布时间】：2016-06-27 08:10:59
【问题描述】：

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

【问题讨论】：

您能否向我们展示您迄今为止所做的尝试并描述为什么它不适合您？
这是复制品吗？：stackoverflow.com/questions/4524180/…
您将需要一些与您的按钮元素相关联的 javascript onclick 事件。 JS 将不得不测试它被点击的次数，并更改与按钮元素关联的类。
伙计们尽量不要让开发人员失望，你来这里不是为了让他们看起来很愚蠢，Meena，输入你的代码以获得帮助，并阅读有关如何在 Stackoverflow 中编写问题以获得帮助。

标签： html css angularjs

【解决方案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 和 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>

【讨论】：

非常感谢。这就是我想要的。它工作得很好:)
没问题！如果此答案对您有帮助，请务必将其标记为已接受，以便对其他人也有帮助。