当我点击屏幕上的其他地方时，按钮的底部边框消失了

Question

这是我的 HTML 代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button>
    <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i>
</button>
<button>
    <i class="fa fa-car fa-5x gobumpr_icon"></i>
</button>

这是我的 CSS:

button:focus {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

我希望边框底部保持不变，直到单击另一个按钮为止。我该怎么做？

Answer 1

如果您在 button:focus 上应用 css，这意味着在按钮成为焦点之前应用 css，但是当您单击屏幕上的任意位置时，其焦点会消失。

在单击的按钮上添加 .active class 并对其应用 css。

$('button').click(function() {
    $('button').removeClass('active');
    $(this).addClass('active');
})

button.active {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

Answer 2

为此，您可以在单击的按钮上设置 class，同时从任何其他按钮上删除 class。试试这个：

$('button').click(function() {
    $('button').not(this).removeClass('active');
    $(this).toggleClass('active');
})

button.active {
    border-bottom: thick solid #FFA800;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: width 2s;
    -webkit-transition: width 2s;
    outline: none;
    box-shadow: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>
<button><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 3

:focus 无济于事，因为只要您在外部单击，边框就会消失。为此，您需要在按钮的 click 上添加一个 class，除非单击同一页面内的其他按钮，否则该按钮将保留。

$(function() {
   var buttons = $('.button');
  
   buttons.click(function(e) {
     e.preventDefault();

     buttons.removeClass('focus');
     $(this).addClass('focus');
  });
});

.button.focus {
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button>

<button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 4

发生这种情况是因为如果元素失去焦点，您应用的 css 将不会产生任何效果。这就是当您单击其他任何地方时发生的情况。

通过添加和删除不同的 class 来解决问题。

单击按钮时向元素添加一个不同的 class。

.borderBottom
{
  border-bottom:thick solid #FFA800;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 2s;
  -webkit-transition: width 2s;
  outline:none;
  box-shadow:none;    
}

在点击另一个时删除已经存在的 class。

参考 javascript 的 add class。

Answer 5

你也可以在没有 javascript 的情况下执行此操作：

input:checked + i{
 border-bottom:thick solid #FFA800;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 transition: width 2s;
    -webkit-transition: width 2s;
 outline:none;
 box-shadow:none;
}

input{
  display:none;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>

当我点击屏幕上的其他地方时，按钮的底部边框消失了

Button's bottom border disappears when i click somewhere else on the screen

html

css

font-awesome