опрокидывание и изменение изображения после перемещения false

Question

С помощью этого кода переключите Div и измените стрелку-img на изображение вверх или вниз. Первое Div по умолчанию открыто, второе закрывается. Моя проблема заключается в том, что если я нажимаю на изображение первого div, чтобы закрыть его, изображение/div изменилось, но если я вытащу мышь из изображения, он изменится на значения по умолчанию. Как я могу это изменить?

var org_src; 
 
$("img.mgu-rollover").hover(
 
    function() { 
 
    org_src = this.src; 
 
    this.src = $(this).attr("data-rolloverImage"); 
 
    }, 
 
    function() { 
 
    this.src = org_src; 
 
    } 
 
); 
 

 
$('.mgu-event-btn').click(function() { 
 
    var open = $(this).attr('rel'); 
 
    $('#' + open).toggle().toggleClass("active"); 
 
    if ($('#' + open).hasClass('active')) { 
 
    $(this).find('img').attr('src', 'img/Pikto_Bubble_up_off.png'); 
 
    $(this).find('img').attr('data-rolloverImage', 'img/Pikto_Bubble_up_over.png'); 
 

 
    } else { 
 
    $(this).find('img').attr('src', 'img/Pikto_Bubble_down_off.png'); 
 
    $(this).find('img').attr('data-rolloverImage', 'img/Pikto_Bubble_down_over.png'); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mgu-event-btn" rel="mgu-event-1"> 
 
    <img class="mgu-rollover" data-rolloverImage="img/Pikto_Bubble_up_over.png" src="img/Pikto_Bubble_up_off.png" width="30" height="30"> 
 
</div> 
 

 
<div class="mgu-event-btn" rel="mgu-event-2"> 
 
    <img class="mgu-rollover" data-rolloverImage="img/Pikto_Bubble_down_over.png" src="img/Pikto_Bubble_down_off.png" width="30" height="30"> 
 
</div>

Answer 1

Вопрос, конечно, this.src = org_src;, который вы могли бы хотеть не делать, если изображение было щелкнул -

function() { 
    if (this.src.indexOf("down")==-1) this.src = org_src; 
} 

, например