jQuery阻止下拉菜单中的默认功能

jQuery prevent default functionality in dropdown menu

本文关键字:默认 功能 下拉菜单 jQuery      更新时间:2023-09-26

我在下拉菜单中创建了一个智能搜索组件。应允许用户根据在输入=菜单中提供的文本中输入的值在下拉列表中进行搜索。

但当我点击输入时,菜单就会关闭。我也尝试过使用preventDefault,但它仍然不起作用。

HTML:

<input type="text" readonly="readonly" value="">
<button class="btn i dropdown-toggle" data-toggle="dropdown"> <i class="caret-down"></i>
</button>
<div class="dropdown-menu smart">
    <input type="text" placeholder="Search">
    <ul class="search-options">
        <li><a href="#">Something</span></a>
        </li>
    </ul>
</div>

JS:

// jQuery to prevent default close 
$('body').on('click', '.dropdown-menu.smart input', function (event) {
    event.preventDefault();
});

编写以下代码,它应该保持下拉菜单打开

$('.dropdown-menu').click(function(e) {
        e.stopPropagation();
});