如何在Justpy中实现点击外部关闭自定义弹出菜单？

你遇到的问题核心是：点击按钮触发菜单显示时，click__out事件同时被触发（按钮不在菜单的DOM范围内），导致菜单刚打开就关闭。结合Justpy的事件机制，这里提供修正后的实现方案：

修正后的代码 #

import justpy as jp

def home_page(request):
    wp = jp.WebPage()

    userButton = jp.Button(type='button', aria_expanded='false', aria_haspopup='true', text="user", a=wp)
    # 保留菜单的基础样式，仅通过invisible/visible控制显示
    menu_base_classes = 'absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
    userMenu = jp.Div(classes=f'{menu_base_classes} invisible', role='menu', aria_orientation='vertical', aria_labelledby='user-menu-button', tabindex='-1', a=wp)
    p1 = jp.Div(a=userMenu, text="Option 1")
    userMenu.isVisible = False
    
    userButton.userMenu = userMenu

    def userMenuClick_out(self, msg):
        if self.isVisible:
            self.add_class('invisible')
            self.remove_class('visible')
            self.isVisible = False

    def toggleUserMenu(self, msg):
        # 阻止事件冒泡，避免触发菜单的click__out事件
        msg.stop_propagation()
        menu = self.userMenu
        if menu.isVisible:
            menu.add_class('invisible')
            menu.remove_class('visible')
            menu.isVisible = False
        else:
            menu.remove_class('invisible')
            menu.add_class('visible')
            menu.isVisible = True

    userMenu.on('click__out', userMenuClick_out)
    userButton.on('click', toggleUserMenu)
    
    return wp

jp.justpy(home_page)

关键修正说明 #

• 修复样式丢失问题：原代码使用set_class会覆盖菜单的所有基础样式，改为add_class和remove_class仅切换可见性相关的类，保留菜单的布局样式。
• 阻止事件冒泡：在按钮点击事件中调用msg.stop_propagation()，避免按钮的点击事件向上传播触发菜单的click__out事件，解决菜单刚打开就关闭的问题。
• 简化逻辑：在click__out处理函数中直接用self指代菜单对象，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Michał B.