用jQuery实现li悬停对应div显隐及图片懒加载问题咨询

Hey there! Let’s work through your megamenu problems step by step—first fixing the hover-to-show-content issue, then setting up lazy-loaded images that only load when needed.

The most common issue with this setup is missing a clear way to link your left-side <li> items to their corresponding right-side <div>s. We’ll fix this by adding matching data attributes to create that connection, then using jQuery to handle the hover state.

Step 1: Update Your HTML Structure #

Add a data-target attribute to each <li> that matches the ID of its corresponding content <div>:

<!-- Left-side menu list -->
<ul class="megamenu-left">
  <li data-target="menu-content-1">Category 1</li>
  <li data-target="menu-content-2">Category 2</li>
  <li data-target="menu-content-3">Category 3</li>
</ul>

<!-- Right-side content area -->
<div class="megamenu-right">
  <div id="menu-content-1" class="menu-content">Content for Category 1...</div>
  <div id="menu-content-2" class="menu-content">Content for Category 2...</div>
  <div id="menu-content-3" class="menu-content">Content for Category 3...</div>
</div>

Step 2: Add jQuery Logic #

We’ll hide all content by default, then show the matching content when its <li> is hovered. We’ll also add optional logic to hide content when the mouse leaves the entire menu container:

$(document).ready(function() {
  // Hide all content blocks initially
  $('.menu-content').hide();

  // Handle hover on left-side list items
  $('.megamenu-left li').hover(
    function() {
      // Get the target content ID from the data attribute
      const targetId = $(this).data('target');
      // Hide all content, then show the matching one
      $('.menu-content').hide();
      $('#' + targetId).show();
    }
  );

  // Optional: Hide content when mouse leaves the entire menu
  $('.megamenu-container').mouseleave(function() {
    $('.menu-content').hide();
  });
});

Quick CSS Note #

Make sure your .megamenu-right and .menu-content are styled correctly (e.g., position: absolute if needed) so the content appears in the right spot when shown.

To avoid loading all images upfront, we’ll store the actual image URL in a data-src attribute instead of src. When the corresponding <li> is hovered, we’ll swap data-src to src to trigger the image load.

Update Your Image HTML #

Replace the src attribute with data-src for images in your content blocks:

<div id="menu-content-1" class="menu-content">
  <h3>Category 1</h3>
  <img data-src="path/to/your/image-1.jpg" alt="Category 1 Image" class="lazy-image">
</div>

Modify the jQuery Hover Logic #

Add a section to load the images when the content is shown:

$(document).ready(function() {
  $('.menu-content').hide();

  $('.megamenu-left li').hover(
    function() {
      const targetId = $(this).data('target');
      const $targetContent = $('#' + targetId);

      // Show the target content
      $('.menu-content').hide();
      $targetContent.show();

      // Load lazy images in this content block
      $targetContent.find('.lazy-image').each(function() {
        const imageSrc = $(this).data('src');
        // Only load if the src isn't already set
        if (imageSrc && !$(this).attr('src')) {
          $(this).attr('src', imageSrc);
        }
      });
    }
  );

  $('.megamenu-container').mouseleave(function() {
    $('.menu-content').hide();
  });
});

This way, images only start loading when their parent content block is triggered by a hover—great for reducing initial page load times!

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