如何让jQuery MeanMenu插件默认处于展开状态？

Hey there! I get that figuring out custom tweaks to plugins can be tricky when you're new to jQuery—let's break down how to get your MeanMenu starting expanded instead of collapsed. Since the plugin doesn't have a built-in option for this, we'll use a few simple post-initialization tricks.

Method 1: Simulate a Click on the Menu Trigger #

MeanMenu uses a hamburger-style trigger button to toggle the menu. After initializing the plugin, we can programmatically trigger a click on that button to expand the menu right away:

jQuery(document).ready(function($) {
  // Initialize MeanMenu as usual
  $('nav').meanmenu();
  
  // Trigger a click on the menu reveal button to expand it
  $('.meanmenu-reveal').trigger('click');
});

Note: Double-check the trigger button's class in your DOM (use browser dev tools!)—some older versions of MeanMenu use .mean-reveal instead of .meanmenu-reveal.

Method 2: Directly Modify the Menu's CSS & Classes #

If simulating a click doesn't work for your setup, you can manually adjust the menu's visibility and toggle the trigger button's state:

jQuery(document).ready(function($) {
  $('nav').meanmenu();
  
  // Show the menu by overriding its default hidden state
  $('.mean-nav').css('display', 'block');
  
  // Toggle the trigger button's classes to match the expanded state
  $('.meanmenu-reveal').removeClass('meanclose').addClass('meanopen');
});

Again, make sure your selectors match your plugin's DOM structure—you might need to use .mean-container .mean-nav if the menu is nested inside a container.

Method 3: Add a Small Delay (If Needed) #

Sometimes the plugin takes a split second to fully initialize, so adding a tiny timeout can ensure your code runs after the menu is ready:

jQuery(document).ready(function($) {
  $('nav').meanmenu();
  
  setTimeout(function() {
    $('.meanmenu-reveal').trigger('click');
  }, 100); // 100ms delay is usually enough
});

Quick Troubleshooting Tip #

Always use your browser's developer tools (F12) to inspect the menu elements after initialization. Look for classes like mean-collapsed or styles like display: none that are hiding the menu—your code will need to override those specific properties/classes.

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