Javascript 如何解决两个事件之间的冲突，单击外部并单击按钮以关闭 svelte kit 中的菜单

我在svelteKit中遇到了碰撞问题.该按钮打开菜单，但当我试图关闭它时，它没有打开.当我在按钮外单击时，这会触发handleClickOutside调用clickOutside.js，然后关闭菜单.

我认为问题是element.contains包括按钮，因此菜单没有关闭.

然而，我无法修复它.

我用的是tailwindUItailwindCSSSvelteKit.

100

<script>
    // @ts-nocheck
    import bostonLogo from '../../img/bostonLogo.png';
    import { clickOutside } from '../../lib/clickOutside';

    // Example Profile
    let profile = {
        name: 'Matias',
        lastName: 'Barletta'
    };

    // Show/Hide Menu

    let menu = false;

    // COLLISION WITH HANDLENAV
    
    function handleClickOutside(event) {            
        menu = false;   
    }

    function handleNav() {

        menu = !menu;
        
    }

</script>

<div>
    <!-- Static sidebar for desktop -->
    <div class=" md:flex md:w-64 md:flex-col md:fixed md:inset-y-0" class:hidden={!menu}>
        <!-- Sidebar component, swap this element with another sidebar if you like -->
        <div
            use:clickOutside
            on:click_outside={menu? handleClickOutside : ''}
            class:absolute={menu}
            class:mt-11={menu}
            class="md:flex-1 md:flex md:flex-col md:min-h-0 bg-gray-800"
        >
...

100

// @ts-nocheck
/** Dispatch event on click outside of element */
// @ts-ignore

export function clickOutside(element) {
    // @ts-ignore

    const handleClick = (event) => {
        console.log(event.target, document.body)
    
        // element exist?, element contain where i did click, preventDefault = false?
        if (element && !element.contains(event.target) && !event.defaultPrevented) {
            element.dispatchEvent(
                // Dispatch and create new custom event.
                new CustomEvent('click_outside', element)
            );
        }
    };
    // add eventlistener when you click on document
    document.addEventListener('click', handleClick, true);

    return {
        destroy() {
            document.removeEventListener('click', handleClick, true);
        }
    };
}