How to collapse the dropkick drop down & also close menu when clicking on web page content?

Question

I have tried following code in my web page to display drop down menu. I have used drop kick js. i'm using jquery 1.9 version.

Drop down is working fine in IE, but its not working as expected in chrome.

My code is

        if ($.browser.msie) {
            $('body').click(function (event) {
                if (!$(event.target).parents('.dk_container').length || $(event.target).parent().attr('id') != $dk.attr('id')) {
                    _closeDropdown($dk);
                }
            });
        }
        else {
            $dk.bind('focus.dropkick', function (e) {
                $dk.addClass('dk_focus');
            }).bind('blur.dropkick', function (e) {
                $dk.removeClass('dk_open dk_focus');
            });
            $(document).click(function(){
                $('.dk_open').removeClass('dk_open');
            });
        }

In chrome, i can able to open drop down menu, if i click outside the menu drop down gets close. But i cant able to collapse the menu by clicking on dropdown.

My page has multiple drop downs.

Answer 1

I have tried the following, its working fine

        $dk.bind('focus.dropkick', function (e) {
            $dk.addClass('dk_focus');
        }).bind('blur.dropkick', function (e) {
            $dk.removeClass('dk_open dk_focus');
        });
        $('body').click(function (event) {
            if (!$(event.target).parents('.dk_container').length || $(event.target).parent().attr('id') != $dk.attr('id')) {
                _closeDropdown($dk);
            }
        });