Why can't I open the mobile drop menu on my multistage collections?

Store Design
, ,

Topic summary

A user is experiencing issues with a mobile dropdown menu for multistage collections after copying code into global.js. While all collections appear in the mobile menu, the multistage menu collections won’t open.

The problematic code:

  • Attempts to make menus open on hover for mobile devices
  • Contains reversed/garbled text in parts of the code
  • Appears incomplete with missing toggle functionality

Suggested solutions include:

  • Verify proper HTML structure using <details> and <summary> elements
  • Add event handling to toggle the open attribute on hover/mouseout
  • Implement correct ARIA attributes (aria-expanded, role="button") for accessibility
  • Ensure event listeners properly target all summary elements and their parent details containers

Current status: The user reports the suggested modifications still don’t resolve the mobile dropdown issue. The problem remains unresolved and may require further debugging of the code implementation or HTML structure.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Because I COPY below the code to global.js ,on mobile drop menu i can see all the collections,but can’t open the Have Multistage Menu collections,Can help me?

// Add this code make menu appears on hover
summary.addEventListener(‘mouseover’, (event) => {
const menuDetails = event.currentTarget.closest(‘details’);
const menuListContainer = menuDetails.closest(‘ul’)
event.currentTarget.setAttribute(‘aria-expanded’, ‘true’);
menuDetails.setAttribute(‘open’, ‘true’);

menuListContainer.addEventListener(‘mouseleave’, () => {
menuDetails.removeAttribute(‘open’);
summary.setAttribute(‘aria-expanded’, ‘false’);
});

menuDetails.addEventListener(“mouseleave”, () => {
menuDetails.removeAttribute(“open”);
summary.setAttribute(‘aria-expanded’, ‘false’);
});

});

2

Hello, @dongfuCamera

The code you provided appears to be attempting to make a menu open on hover for mobile devices. However, it seems to be missing some elements that are required for the correct functioning of a dropdown menu.

Here are some things to consider and modify in your code

HTML Structure: Ensure that your HTML structure is correctly set up with the

and elements for your menu items. The
element should contain the menu content, and the element should be the trigger for opening and closing the menu.

Event Handling: The event listener code you provided seems to be missing the part that toggles the menu open and close on hover. You should add code to toggle the open attribute of the

element based on hover events.

Here’s an example of how you can modify your code

const summaryElements = document.querySelectorAll('summary');

summaryElements.forEach((summary) => {
  summary.addEventListener('mouseover', () => {
    const menuDetails = summary.parentElement; // Get the parent 

- This code adds event listeners to all <summary> elements, opens the associated <details> element on hover, and closes it on mouseout.

- **Aria Roles and Attributes**: Ensure that you've correctly set ARIA roles and attributes for accessibility. Make sure your <summary> elements have role="button" and aria-expanded attributes to indicate the state of the dropdown menu.

```markup

Remember to replace ‘Menu Item’ and ‘Menu content goes here’ with your actual menu item text and content.

1 Like
3

still not working on mobile drop menu