一次打开一个手风琴部分。 （苗条）

Question

我想问一个能弄清楚如何让这个手风琴组件一次只打开一个部分的人。

这意味着如果一个新的手风琴打开，前一个手风琴必须自动关闭。

在理想情况下，此功能对于特定的手风琴是可选的。

感谢您的时间。

手风琴.svelte

 <script>
    import { linear } from 'svelte/easing';
    import { slide} from 'svelte/transition';
    
    export let open = false;

    function handleClick() {
        open = !open
    } 
    
</script>

   <div  class="accordion">
      <div class="header" on:click={handleClick}>
          <div class="text">
              <slot name="head"></slot> 
          </div>
      </div>

      {#if open}
      <div class="details" transition:slide="{{duration: 500, easing: linear}}" >
          <slot name="details">
          </slot>
      </div>
      {/if}

  </div>

<style>
       div.accordion {
          margin: 1rem 0;
      }
      
      div.header {
          display:flex;
          width:100%;
      }
      
      div.header .text {
          flex: 1;
      }
      
      div.details {
          background-color: transparent;
          padding:1rem;
      }
  </style>

应用程序.svelte

<script>

import Accordion from "./Accordion.svelte"

</script>

       <Accordion>
          <div slot="head">
              <h2>Test one</h2>
          </div>
          <div slot="details">
              <ul>
                <Accordion>
                    <div slot="head">
                      <h4>The test of subitem?</h4>
                    </div>
                    <div slot="details">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </div>
                </Accordion >

                <Accordion>
                    <div slot="head">
                        <h4>Test of subitem 2</h4>
                    </div>
                    <div slot="details">
                        <li>one</li>
                        <li>two</li>
                        <li>three</li>
                    </div>
                </Accordion>
              </ul>
          </div>
       </Accordion>

       <Accordion>
          <div slot="head">
              <h4>Second test</h4>
          </div>
          <div slot="details">
              <ul>
                  <li>again one</li>
                  <li>two again</li>
                  <li>three repeat</li>
              </ul>
          </div>
        </Accordion>


<style>
li {
    margin: 0;
    padding: 1em;
    text-align: left;
    list-style-type: none;
    cursor: pointer;
    color: black;
}

h4, h2 {
        cursor: pointer;
}
</style>

Answer 1

为此，通常会使用context 。 然后上下文可以管理当前的手风琴（或代表它的键）或将事件分派到其他手风琴实例。

作为存储当前手风琴的示例：

import { setContext, getContext } from 'svelte';
import { writable } from 'svelte/store';

const key = {}; // Object instances are unique, hence useful for keys

export const getAccordionContext = () => getContext(key);
export const createAccordionContext = () => {
    const current = writable(null);
    const context = { current };
    setContext(key, context);
    
    return context;
}

如果没有与手风琴项结合使用的包装器组件，则在其他地方（例如App ）创建了一个上下文。 此外，每个手风琴项还应创建自己的上下文，因此如果它包含自己的项，则在打开子项时不会关闭。

当打开手风琴时，可以更新上下文的当前手风琴。 反应式语句可用于关闭属于上下文的所有其他手风琴。

// In Accordion.svelte
const { current } = getAccordionContext();
const currentKey = {}; // Object representing current accordion component

createAccordionContext(); // Context for children

function handleClick() {
    open = !open
    if (open)
        $current = currentKey;
}

$: if ($current != currentKey)
    open = false;

REPL 示例