点击输入框，下拉弹框，点击页面的其他部分，弹框消失

下拉菜单交互实现

最新推荐文章于 2023-07-20 11:17:09 发布

原创最新推荐文章于 2023-07-20 11:17:09 发布 · 8k 阅读

2 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的下拉菜单交互效果，包括如何显示和隐藏菜单，以及如何阻止菜单在外层点击时关闭。此外，还讨论了在菜单内嵌套其他组件时保持菜单打开状态的方法。

点击下拉框，下面会弹出一个框，再点击收回，点击页面的其他内容，此下拉弹出框也会消失：

  //选择查询的类型弹出框
    $('.query_select').hide();
    $('#select').click(function (e) {
        if ($('.query_select').is(':hidden')) {
            $(".query_select").show();
        } else {
            $('.query_select').hide();
        }
        $(document).one('click', function () {
            $('#indexList').blur();
            $('#indexList').click();
            $('.query_select').hide();
        })
        e.stopPropagation();
    });
    $('.query_select').on('click', function (e) {
        e.stopPropagation();
    })

//-------------------

如果：弹出框内部还要弹出，比如弹出时间选择插件，在选择的时候想要不让父弹框消失，那么就是要在点击