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);
            }
        });

Answer 2

The approved suggestion did not work for me. On whatever event you want the dropkick drop down to close, create the dropkick object with the select field passed and call .close() on the object in the event's callback:

$('.style').click(function(event) {
  new Dropkick('#the-dropdown').close()
})