Alpine.js menu toggle issue

Question

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!

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
– Josjojo, Commented Jan 4 at 20:45
For more information look the link stackoverflow.com/questions/68353326/… — Gev99
– Gev99, Commented Jan 4 at 20:59

TUPKAP · Accepted Answer · 2025-01-05 02:54:56Z

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)

edited Jan 5 at 2:54

answered Jan 4 at 21:04

TUPKAP

5,5642 gold badges5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josjojo Jan 4 at 21:25

Yes! Now it works. I copied some code from a GitHub code base and they used Alpine.js v2, but I was using v3. Thanks for the help!

Collectives™ on Stack Overflow

Alpine.js menu toggle issue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related