jQuery .click(): aktiv

Question

mit dem folgenden Code (jFiddle):

<style> 
div.bluebox { 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
} 

div.greenbox { 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 


div.greenbox:active{ 
    background-color: yellow; 
} 
</style> 
<script> 
$('.bluebox').click(function(e){ 
     e.preventDefault(); 
    $('.greenbox').click(); 
}); 
</script> 

<div class="bluebox"> 
</div> 

<div class="greenbox"> 
</div> 

Wenn ich auf dem greenbox klicken, dann die Hintergrundfarbe auf gelb. Wenn ich auf die Bluebox klicke, wird das click-Ereignis der greenbox ausgelöst, aber der Hintergrund ist immer noch grün. Wie kann ich jQuery mitteilen, greenbox den Status aktiv zu geben, wenn der Klick indirekt ausgeführt wird?

Answer 1

Sie sollten versuchen, alles in Ihrem js zu setzen. wie folgt aus:

$('.bluebox').mousedown(function(){ 
    $(".greenbox").css("backgroundColor", "yellow"); 
    }).mouseup(function(){ 
     $(".greenbox").css("backgroundColor", "green"); 
    }); 
$('.greenbox').mousedown(function(){ 
    $(".greenbox").css("backgroundColor", "yellow"); 
}).mouseup(function(){ 
    $(".greenbox").css("backgroundColor", "green"); 
}); 

https://jsfiddle.net/1nxfy18v/

Answer 2

EDIT

Der Code auf mousedown() und mouseup() wie gesagt in den Kommentaren:

$('.bluebox').mousedown(function(){ 
    $(".greenbox").toggleClass('active'); 
}).mouseup(function(){ 
    $(".greenbox").toggleClass('active'); 
}); 

New fiddle

---

Sie nicht :active CSS Zustand mit Javascript auslösen können. Sie können jedoch eine Klasse wechseln stattdessen ein ähnliches Verhalten zu reproduzieren:

div.greenbox.active{ 
    background-color: yellow; 
} 

$('.bluebox').click(function(e){ 
     e.preventDefault(); 
    $('.greenbox').toggleClass('active'); 
}); 

Fiddle