Hide Mini-Cart and Header-Account Dropdown When Click Outside of Those Sections

Question

I am building a custom theme based on Magento 1.9 RWD.

How do I manage to hide/close the mini cart and header-account drop down by clicking anywhere outside of those sections ?

EDIT - 1

zhartaunik's answer helped me to resolve the issue. But I am now facing below issue.

If I click the language-switcher its stays open. Now when I click the mini cart and header-account, those drop-downs opens, but also the language-switcher still stays open! I want this one to close directly when another button is clicked? How do I get this done?

Answer 1

Hope It has no issues...

Add this script to

/app/design/frontend/rwd/default/template/checkout/cart/minicart/items.phtml

<script>
    $j('body').click(function (event)
    {
        element = $j(event.target);
        if(element.parents('.skip-link.skip-cart').length == 1 || element.hasClass('skip-cart'))
        {
            return;
        }
        var parent = $j('.minicart-wrapper').parents('.skip-content');
        var link = parent.siblings('.skip-link');

        if (element.parents('.minicart-wrapper').length == 0) {
            parent.removeClass('skip-active');
            link.removeClass('skip-active');
        }
    });
</script>

upd.1

My cart is closing successfully with that extension:

Maybe you have some javascript errors in console? As you can see - my javascript is simple. If you click outside of block - it gets closed.