Buttona znika po kliknięciu gdzieś indziej na ekranie

Question

fiddle

To jest mój kod 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> 

To jest mój 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; 
} 

chcę, że dolna granica pozostać do momentu kliknięcia drugiego przycisku. Jak mogę to zrobić?

Answer 1

:focus nie pomoże, ponieważ granica usunie ilekroć będzie kliknięciu na zewnątrz. W tym celu należy dodać klasę na przycisku click przycisku, który pozostanie, o ile nie zostaną kliknięte inne przyciski znajdujące się na tej samej stronie.

$(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 2

Jeśli zastosujesz css na button:focus, oznacza to, że do czasu, gdy fokus czasu zostanie ustawiony, css zostanie zastosowany, ale gdy klikniesz gdziekolwiek na ekranie, jego ostrość zniknie.

Dodaj klasę .active kliknięciem przycisku i zastosuj css w tym.

$('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 3

Aby to osiągnąć, możesz ustawić klasę na przycisku, który klikniesz, usuwając klasę z dowolnego innego przycisku. Spróbuj tego:

$('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 4

Dzieje się tak dlatego, że css zostały zastosowane nie będzie miał żadnego wpływu, gdy element traci ostrość. Tak się dzieje, gdy klikniesz gdziekolwiek indziej.

Rozwiąż problem przez dodanie i usunięcie innej klasy.

Kliknięcie przycisku dodaje inną klasę do elementu.

.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;  
} 

Klikając na inny usuń klasę, w której jest już obecna.

Refer add class javascript.

Answer 5

Można również zrobić to bez javascript w ogóle:

input:checked + i{ 
 
\t border-bottom:thick solid #FFA800; 
 
\t border-bottom-left-radius: 5px; 
 
\t border-bottom-right-radius: 5px; 
 
\t transition: width 2s; 
 
    -webkit-transition: width 2s; 
 
\t outline:none; 
 
\t 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>