javascript - Alpine.js menu toggle issue - Stack Overflow

admin2025-05-01 2

I'm currently working on a project using Laravel and Alpine.js, and I've run into a bit of a problem with a menu toggle feature. I have a button that is supposed to toggle the visibility of a menu when clicked. However, the menu is not showing.

Here’s a simplified version of my code:

resources/views/test.blade.php:

<!DOCTYPE html>
<html x-data="data()">

<head>
    @vite(['resources/js/app.js'])
</head>
<body>
    <button @click="toggleMenu" @keydown.escape="closeMenu">Toggle menu</button>
    <template x-if="isMenuOpen">
        <div @click.away="closeMenu" @keydown.escape="closeMenu">Menu is open.</div>
    </template>
</body>
</html>

resources/js/app.js:

import Alpine from 'alpinejs';
window.Alpine = Alpine;
window.data = function data() {
    return {
        isMenuOpen: false,
        toggleMenu() {
            this.isMenuOpen = !this.isMenuOpen;
        },
        closeMenu() {
            this.isMenuOpen = false;
        },
    }
}
Alpine.start();

I have installed a debugbar for Alpine.js to investigate the problem. The issue seems to be that the isMenuOpen variable is set to true when I click the button, but it quickly changes back to false, causing the menu to close immediately.

Does anyone have any suggestions on how to make the menu stay open after clicking the button? Any help would be greatly appreciated!

Thanks in advance!

Here’s a simplified version of my code:

resources/views/test.blade.php:

<!DOCTYPE html>
<html x-data="data()">

<head>
    @vite(['resources/js/app.js'])
</head>
<body>
    <button @click="toggleMenu" @keydown.escape="closeMenu">Toggle menu</button>
    <template x-if="isMenuOpen">
        <div @click.away="closeMenu" @keydown.escape="closeMenu">Menu is open.</div>
    </template>
</body>
</html>

resources/js/app.js:

import Alpine from 'alpinejs';
window.Alpine = Alpine;
window.data = function data() {
    return {
        isMenuOpen: false,
        toggleMenu() {
            this.isMenuOpen = !this.isMenuOpen;
        },
        closeMenu() {
            this.isMenuOpen = false;
        },
    }
}
Alpine.start();

Does anyone have any suggestions on how to make the menu stay open after clicking the button? Any help would be greatly appreciated!

Thanks in advance!

Share Improve this question edited Jan 4 at 20:16 asked Jan 4 at 20:09 Josjojo 3141 gold badge2 silver badges11 bronze badges

I added a console.trace() to closeMenu(). Now when I click the toggle button the console shows a stack trace. So closeMenu() is immediately executed after clicking the button. That's why isMenuOpen is changed back to false. – Josjojo Commented Jan 4 at 20:45
I think the issue in the @click.away section – Gev99 Commented Jan 4 at 20:55
Try without .away – Gev99 Commented Jan 4 at 20:55
For more information look the link stackoverflow.com/questions/68353326/… – Gev99 Commented Jan 4 at 20:59

Add a comment |

1 Answer 1

Sorted by: Reset to default 3

When you click the button you are also clicking outside the 'menu', so the @click.away event is triggered.

You can use x-show instead of x-if to display/hide the menu in conjunction with x-cloak, this has a different behavior:

<head>
    <style> [x-cloak] { display: none !important; } </style>
    .....
</head>

<body>

<button @click="toggleMenu"
        @keydown.escape="closeMenu"
>
    Toggle menu
</button>

<div x-cloak
     x-show="isMenuOpen"
     @click.away="closeMenu"
     @keydown.escape="closeMenu"
>
    Menu is open.
</div>

</body>

Note: if you are using AlpineJs 3 the correct modifier is outside not away (@click.outside)

转载请注明原文地址:http://anycun.com/QandA/1746028910a91559.html

javascript - Alpine.js menu toggle issue - Stack Overflow

1 Answer 1

javascriptAlpinejs menu toggle issueStack Overflow