使用JavaScript实现下拉列表互斥切换（点击关闭其他下拉）

解决方案思路 #

针对所有带有role="list"属性的下拉列表，实现点击展开时自动关闭其他已展开的下拉，核心是监听交互事件，遍历同类型元素并控制非当前元素的状态。

代码实现（适配jQWidgets组件） #

你的元素是jQWidgets的jqx-listbox，可以利用组件官方API来精准控制展开/关闭：

// 给所有目标下拉列表绑定点击事件
$('[role="list"]').on('click', function() {
    const currentDropdown = $(this);
    // 遍历所有带role="list"的下拉列表
    $('[role="list"]').each(function() {
        const dropdown = $(this);
        // 跳过当前点击的下拉，关闭其余展开的下拉
        if (dropdown[0] !== currentDropdown[0]) {
            // 调用jqxDropDownList的关闭方法，若组件是jqxListBox则替换为collapse方法
            dropdown.jqxDropDownList('close');
        }
    });
});

通用DOM操作版本（无需组件API） #

如果下拉的展开状态是通过CSS类（比如expanded）控制的，用以下代码更通用：

$('[role="list"]').on('click', function() {
    const current = $(this);
    // 切换当前下拉的展开状态
    current.toggleClass('expanded');
    // 移除其他下拉的展开类以关闭它们
    $('[role="list"]').not(current).removeClass('expanded');
});

优化建议 #

若下拉支持键盘操作展开，绑定组件的open事件会比点击事件更可靠：

$('[role="list"]').on('open', function() {
    const current = $(this);
    $('[role="list"]').not(current).jqxDropDownList('close');
});

内容的提问来源于stack exchange，提问作者testing test