React -当您在dropdown中开发手风琴时，避免dropdown to close

import React from 'react';

function AccordionItem({ title, content }) {
  const handleClick = (event) => {
    event.stopPropagation();
    // 手风琴展开/折叠逻辑
  };

  return (
    <div onClick={handleClick}>
      <h3>{title}</h3>
      <div>{content}</div>
    </div>
  );
}

function DropdownWithAccordion() {
  return (
    <div className="dropdown">
      <button className="dropdown-toggle">Toggle Dropdown</button>
      <div className="dropdown-menu">
        <AccordionItem title="Section 1" content={<p>Content for section 1</p>} />
        <AccordionItem title="Section 2" content={<p>Content for section 2</p>} />
      </div>
    </div>
  );
}

export default DropdownWithAccordion;

.dropdown-menu {
  pointer-events: auto;
}

.dropdown-menu > * {
  pointer-events: none;
}

<div className="dropdown-menu">
  <AccordionItem title="Section 1" content={<p>Content for section 1</p>} />
  <AccordionItem title="Section 2" content={<p>Content for section 2</p>} />
</div>

import React, { useCallback, useRef } from 'react';

function AccordionItem({ title, content }) {
  const itemRef = useRef(null);

  const handleClick = useCallback((event) => {
    if (itemRef.current && !itemRef.current.contains(event.target)) {
      return;
    }
    // 手风琴展开/折叠逻辑
  }, []);

  return (
    <div ref={itemRef} onClick={handleClick}>
      <h3>{title}</h3>
      <div>{content}</div>
    </div>
  );
}