CODEWITHSUNDEEP
javascriptalpine.js
Adam
Adam

Reputation: 29079

Change attribute in all components in alpine.js?

I have created a fly-out menu with alpine. For mouse accessibility, I added a timer, so that the menu is not closed immediately once the course moves out (See here for more https://www.w3.org/WAI/tutorials/menus/flyout/)

My current problem is that I if move from one dropdown to another, then I have two dropdowns open for a split second, because of the delayed close:

enter image description here

Each dropdown is one component. Is it possible to set attribute open to false for all dropdown components? Something like this?

show() {
  forAllDropdownComponents.open=false;
  clearTimeout(this.$el.timer);
  this.open = true;
},

Here is the code: 

function dropdown() {
        return {
            open: false,
            timer: '',
            show() {
                clearTimeout(this.timer);
                this.open = true;
            },
            hide() {
                this.timer = setTimeout(() => {
                    this.open = false;
                }, 300);

            }
        }
}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<ul id="nav">
    <li ><a href="#" >Somethong Else</a></li>
    <li >
        <div x-data="dropdown()">
        <a href="#" @mouseover="show()" @mouseleave="hide()">Droppi</a>
        <ul x-show="open">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
            <li><a href="#">Link #3</a></li>
        </ul>
    </div>
    </li>
    <li >
        <div x-data="dropdown()" class="relative">
            <a href="#" @mouseover="show()" @mouseleave="hide()" >Droppi</a>
            <div x-show="open">
                <ul >
                    <li><a href="#">Link #1</a></li>
                    <li><a href="#">Link #2</a></li>
                    <li><a href="#">Link #3</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Upvotes: 0

Views: 1287

Answers (1)

sherifcoder
sherifcoder

Reputation: 169

it seems that sestTimeOut can't be stopped once it is launched , when you clear it , it s only to stop next one from happening.

Upvotes: 0

Related Questions