求助：如何获取HTML中menu-id="2"的菜单项并添加JavaScript

Hey there! Let's work through how to target that menu with menu-id="2" and add your JavaScript code to its items. The main catch here is that <vc:menu> is almost certainly a custom component (likely Vue, given the vc: prefix)—it doesn't stay as-is in the final rendered DOM, but gets replaced with standard HTML elements like <ul> and <li>. That's why direct attempts to grab it might have failed!

Step 1: First, see what the component actually renders #

Right-click the menu in your browser's DevTools > Inspect Element. You'll see something like this (the exact structure depends on the component):

<div class="vc-menu-wrapper" data-menu-id="2">
  <ul class="vc-menu-list">
    <li class="vc-menu-item"><a href="/about">About</a></li>
    <li class="vc-menu-item"><a href="/contact">Contact</a></li>
  </ul>
</div>

Take note of the rendered classes or attributes (like data-menu-id="2", which might be a transformed version of your original menu-id prop).

Step 2: Choose the right approach based on your setup #

Option A: Native JavaScript (for vanilla or framework-agnostic projects) #

Since the menu loads dynamically, you need to wait for it to exist in the DOM. A reliable way is to use a MutationObserver to watch for when the menu renders:

// Target the footer container where the menu lives
const footer = document.getElementById('footer');

// Set up an observer to watch for new elements in the footer
const menuObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // Look for the rendered menu items (adjust the selector to match what you saw in DevTools)
    const menuItems = footer.querySelectorAll('[data-menu-id="2"] .vc-menu-item');
    
    if (menuItems.length > 0) {
      // Add your custom JavaScript to each item
      menuItems.forEach(item => {
        item.addEventListener('click', () => {
          console.log('Menu item clicked:', item.textContent);
          // Add your logic here—like opening a modal, tracking clicks, etc.
        });
      });
      // Stop observing once we've modified the menu items
      menuObserver.disconnect();
    }
  });
});

// Start watching the footer for changes
menuObserver.observe(footer, { childList: true, subtree: true });

Option B: Vue-specific approach (if this is a Vue project) #

If you're working in Vue, you can use refs and Vue's lifecycle hooks to access the component after it renders:

<template>
  <section id="footer">
    <div class="container">
      <div class="row text-center text-xs-center text-sm-left text-md-left">
        <div class="col-xs-12 col-sm-4 col-md-4">
          <h5>Information</h5>
          <!-- Add a ref to the menu component -->
          <vc:menu menu-id="2" ref="infoMenu"></vc:menu>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  mounted() {
    // Wait for Vue to finish rendering the component
    this.$nextTick(() => {
      // Access the rendered DOM elements of the menu
      const menuItems = this.$refs.infoMenu.$el.querySelectorAll('.vc-menu-item');
      
      menuItems.forEach(item => {
        item.addEventListener('click', () => {
          console.log('Menu item clicked:', item.textContent);
          // Your custom logic here
        });
      });
    });
  }
}
</script>

Option C: jQuery (if you're using it) #

jQuery makes dynamic element handling easy with event delegation:

// Use event delegation to target menu items even after they render
$(document).on('click', '[data-menu-id="2"] .vc-menu-item', function() {
  console.log('Menu item clicked:', $(this).text());
  // Your custom logic here
});

Key Tips #

• Always double-check the rendered DOM structure in DevTools—this will save you from guessing selectors.
• If the component has documentation, check if it supports slots or custom events (that's often a cleaner way than manually adding event listeners!).

内容的提问来源于stack exchange，提问作者user9080158