html - 单击并按住鼠标与单击鼠标一次

Question

我在某种程度上理解 :active 状态，但我不知道如何通过单击(不按住)来转换我的 box1。相反，要转换我需要在整个转换过程中单击并按住该框。

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

你必须使用 jQuery 或 javascript。

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