Klicken und halten Maus vs Mausklick einmal

Question

Ich verstehe die :active Zustand zu einem gewissen Grad, aber ich weiß nicht, wie meine box1 durch Klicken (ohne zu halten.) Umwandeln muss ich klicken und halten Sie die Box für die gesamte Dauer der Transformation.

https://jsfiddle.net/kzmhtkog/4/

.wrap { 
 
    width: 100%; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 

 
#box1 { 
 
    background-color:red; 
 
    text-align:left; 
 
    cursor: pointer; 
 
    -webkit-transition: width 1s; 
 
    transition: width 1s; 
 
} 
 

 
#box1:active { 
 
    width: 100%; 
 
    background-color: red; 
 

 
} 
 

 
.floatleft { 
 
    float:left; 
 
    width: 33.33%; 
 
    background-color: black; 
 
    height: 400px; 
 
}

<div class="wrap"> 
 
    <div class="floatleft" id="box1"> 
 
    </div> 
 
</div>

Answer 1

Sie würden jQuery oder haben Javascript verwenden.

$('#box1').click(function() { 
 
    $(this).toggleClass('active'); 
 
});

.wrap {       
 
    width: 100%;     
 
    height:400px;     
 
    overflow:hidden;    
 
}        
 
           
 
#box1 {       
 
    background-color:red;   
 
    text-align:left;    
 
    cursor: pointer;    
 
    -webkit-transition: width 1s; 
 
    transition: width 1s;   
 
}        
 
           
 
#box1.active {     
 
    width: 100%;     
 
    background-color: red;   
 
           
 
}        
 
           
 
.floatleft {      
 
    float:left;     
 
    width: 33.33%;     
 
    background-color: black;  
 
    height: 400px;     
 
}       

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap">     
 
    <div class="floatleft" id="box1"> 
 
    </div>        
 
</div>