单击网页内容时如何折叠 dropkick 下拉菜单并关闭菜单？答案

【问题标题】：How to collapse the dropkick drop down & also close menu when clicking on web page content?单击网页内容时如何折叠 dropkick 下拉菜单并关闭菜单？
【发布时间】：2013-11-25 23:47:09
【问题描述】：

我已尝试在我的网页中使用以下代码来显示下拉菜单。我用过 drop kick js。 我用的是 jquery 1.9 版本。

下拉菜单在 IE 中运行良好，但在 chrome 中无法正常运行。

我的代码是

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

在 chrome 中，我可以打开下拉菜单，如果我在菜单之外单击，下拉菜单会关闭。但我无法通过单击下拉菜单来折叠菜单。

我的页面有多个下拉菜单。

【问题讨论】：

标签： jquery google-chrome drop-down-menu cross-browser jquery-dropkick

【解决方案1】：

我已经尝试了以下，它工作正常

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

【讨论】：

【解决方案2】：

批准的建议对我不起作用。在您希望 dropkick 下拉菜单关闭的任何事件中，使用传递的选择字段创建 dropkick 对象，并在事件回调中的对象上调用 .close()：

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

【讨论】：