javascript - Close other dropdown on click in svelte - Stack Overflow

admin管理员组

文章数量:1397074

This is the simple dropdown ponent I use.

<script>
    let show = false;
</script>

<div>
    <button on:click={() => show = !show }>Show Dropdown</button>
    {#if show}
        <div>
            <a href="/">Option 1</a>
            <a href="/">Option 2</a>
            <a href="/">Option 3</a>
            <a href="/">Option 4</a>
        </div>
    {/if}
</div>

<style>
    a { display: block; }
</style>

I am using this ponent in parent three times as follow:

<script>
    import Dropdown from './dropdown.svelte';
</script>

<div>
    <Dropdown />
    <Dropdown />
    <Dropdown />
</div>

Once I click first dropdown its respective dropdown content opens, but upon clicking next dropdown how do I close previous dropdowns and open only the one that is clicked?

Thank You

This is the simple dropdown ponent I use.

<script>
    let show = false;
</script>

<div>
    <button on:click={() => show = !show }>Show Dropdown</button>
    {#if show}
        <div>
            <a href="/">Option 1</a>
            <a href="/">Option 2</a>
            <a href="/">Option 3</a>
            <a href="/">Option 4</a>
        </div>
    {/if}
</div>

<style>
    a { display: block; }
</style>

I am using this ponent in parent three times as follow:

<script>
    import Dropdown from './dropdown.svelte';
</script>

<div>
    <Dropdown />
    <Dropdown />
    <Dropdown />
</div>

Once I click first dropdown its respective dropdown content opens, but upon clicking next dropdown how do I close previous dropdowns and open only the one that is clicked?

Thank You

• javascript
• svelte
• sveltekit

Share Improve this question Follow edited Aug 10, 2022 at 15:48 Mir Stephen asked Jul 7, 2022 at 11:03 Mir StephenMir Stephen 1,92766 gold badges3333 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

For this a mon method is to add a click event handler at the top and trigger closing that way. You just have to exclude the case where the click happens inside the dropdown.

<script>
    let show = false;
    let container;
    
    function onWindowClick(e) {
        if (container.contains(e.target) == false)
            show = false;
    }
</script>

<svelte:window on:click={onWindowClick} />

<div bind:this={container}>
    <button on:click={() => show = !show }>Show Dropdown</button>
    ...
</div>

REPL

(Event handlers added via svelte:window are cleaned up automatically.)

It is important to use the correct elements for accessibility reasons. Links should be a Element, otherwise clickable things should be button elements. This allows proper keyboard interaction and provides semantics to screen readers.

Ideally, elements also should be supplied with the correct ARIA attributes (like role) where appropriate and keyboard interactions like up/down arrow navigation, close on Escape and the like should be implemented. (See guidelines.)

Well i never touched svelte but i know an method how to do it.

You can use focus and blur events

You add tabindex="0" to the element and whenever you open it, you focus the element. Now, whenever you click outside of the element the blur event will be triggered. It even gets triggerd if you click outside of your browser.

<script>
import { tick } from 'svelte';
let show = false;
let dropdownElement;
async function showDropdown() {
    show = !show;
    //we need to wait with tick, until DOM nodes have mounted
    await tick();
    dropdownElement.focus()
}
</script>

<div>
    <button  on:click={ showDropdown }>Show Dropdown</button>
    {#if show}
        <div  on:blur={() => show = false} tabindex="0" bind:this={dropdownElement}>
            <div>Option1</div>
            <div>Option2</div>
            <div>Option3</div>
        </div>
    {/if}
</div>

I use div instead of a tags because when you click on the a tags, the parent loses its focus.

本文标签： javascriptClose other dropdown on click in svelteStack Overflow