【问题标题】:jQuery autocomplete deactivates bootstrap menu dropdownjQuery自动完成停用引导菜单下拉菜单
【发布时间】:2013-01-29 14:44:43
【问题描述】:

我使用 twitter bootstrap 作为我的网站框架。我也在使用 jQuery。

在我的主导航栏中,我有一个引导下拉菜单,其中包含一个搜索框。搜索框有一个 jQuery 自动完成功能,完美运行。

但是我的问题是,当用户单击自动完成列表中的一项时,引导下拉菜单会关闭,从而阻止用户单击“搜索”按钮,直到他们重新打开下拉菜单(搜索查询仍然存在) .

显然这让我的用户很恼火......

当从自动完成列表中进行选择时,是否有一种简单的方法可以防止下拉菜单关闭?这是由于两个框架之间的冲突吗?

提前致谢。

戈登

更新:

用下面的代码解决了这个问题:

    <script type="text/javascript">
           $(document).ready(function () {
               $('body').find('.ui-autocomplete').click(function (e) {
                        e.stopPropagation();
               });
            });
    </script>

这会在点击时停止在 ui-autocomplete 下拉元素上的传播,并保持引导下拉菜单打开以允许用户点击搜索按钮。

感谢伊舍伍德的指点

【问题讨论】:

    标签: jquery asp.net twitter-bootstrap autocomplete


    【解决方案1】:

    这不是冲突,而是 Bootstrap 菜单的正常行为。我为此目的使用这些函数:

    $(function() {
        //prevent menu from closing when clicking into a form element
        $('.drop').find('form').click(function (e) {
            e.stopPropagation();
        });
    
        // other elements with the 'stay-open' class
        $('.drop').find('.stay-open').click(function (e) {
            e.stopPropagation();
        });
    });
    

    【讨论】:

    • 在哪里添加 .stay-open 类?在文本框上?
    • 那个,或者它的祖先之一。假设表单标签位于下拉菜单中,第一个示例可能会为您处理它。
    • 嗯,没有得到任何快乐。我在页面末尾的
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-06
    • 2021-11-05
    • 2019-04-19
    相关资源
    最近更新 更多