javascript 具有2个LVL下拉菜单的移动菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 具有2个LVL下拉菜单的移动菜单相关的知识，希望对你有一定的参考价值。
<ul class="mobile-nav mean-container"><div class="mean-bar"><a data-role="none" href="#nav" class="meanmenu-reveal" style="right: 0px; left: auto;"><span></span><span></span><span></span><span></span></a><nav class="mean-nav">
<div class="nav-wrapper">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu" style="display: none;">
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home page_item page-item-4 menu-item-23"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/">Home</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-431"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/">About</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-423"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/our-mission/">Our Mission</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-424"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/our-team/">Our Team</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-425"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/our-impact/">Our Impact</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36456"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/awards/">Awards</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-426"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/sponsors/">Sponsors</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/store/">Store</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-428"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/financials/">Financials</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-429"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/press-room/">Press Room</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-430"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/about/contact-us/">Contact Us</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-432"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/">Prevent</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-433"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/about-colorectal-cancer/">About Colorectal Cancer</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-434" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-434"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/about-colorectal-cancer/facts-stats/">Facts and Stats</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-435"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/symptoms/">Symptoms</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-436"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/risks/">Risks</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-437"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/genetics/">Genetics</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-438"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/screening-options/">Screening Options</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-439"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/prevent/prevention-campaign/">Prevention Campaign</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-440"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/">Fight</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/diagnosis/">Diagnosis</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-442"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/treatment/">Treatment</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/clinical-trials/">Clinical Trials</a>
</li>
<li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/treatment/treatment-tools/">Treatment Tools</a>
</li>
<li id="menu-item-445" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-445"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/treatment/funding-treatment/">Funding Treatment</a>
</li>
<li id="menu-item-446" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-446"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/treatment/managing-side-effects/">Managing Side Effects</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-447"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/living-crc/">Living with CRC</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/living-crc/diet-nutrition/">Diet and Nutrition</a>
</li>
<li id="menu-item-449" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-449"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/living-crc/caregiving/">Caregiving</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/survival-rates/">Survival Rates</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-451"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/post-treatment/">Post-Treatment</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/post-treatment/life-after-crc/">Life after CRC</a>
</li>
<li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/post-treatment/survivorship-care/">Survivorship Care</a>
</li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/post-treatment/hospice-care/">Hospice Care</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/fight/library/">Library</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-456"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/">Research</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/our-medical-experts/">Our Medical Experts</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/driving-research/">Driving Research</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-459"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/funding-research/">Funding Research</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-460"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/funding-research/grant-recipients/">Grant Recipients</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-624"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/research/clinical-trials/">Clinical Trials</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-461"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/">Advocacy</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/hill/">On the Hill</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/hill/advocacy-leaders/">Advocacy Leaders</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-464"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/grassroots/">Grassroots</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-465" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-465"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/grassroots/">ACT Program</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-466"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/campaigns/">Campaigns</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-467" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-467"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/campaigns/august-recess-challenge/">August Recess Challenge</a>
</li>
<li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/campaigns/blue-star-states/">Blue Star States</a>
</li>
<li id="menu-item-469" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-469"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/campaigns/call-congress/">Call-On Congress</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-470"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/research-advocacy/">Research Advocacy</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-471" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-471"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/research-advocacy/training/">Training</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-472"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/advocacy/celebrity-advocates/">Celebrity Advocates</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/blog/">Blog</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34693"><a data-role="none" data-role="none" target="_blank" href="https://give.fightcrc.org/checkout/donation?eid=26925">Donate</a>
</li>
<li id="mobile-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-282"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/">Join the Fight</a>
<ul class="sub-menu" style="display: none;">
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-283"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/ways-give/">Ways to Give</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-284"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/volunteer/">Volunteer</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-474"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/raise-awareness/become-ambassador/">Become an Ambassador</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-285"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/raise-awareness/">Raise Awareness</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/share-your-story/">Share Your Story</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/connect-fighters/">Connect with Fighters</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34400"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/get-updates/">Get Updates</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/attend-event/">Attend an Event</a>
</li>
<li id="sub-menu-item" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-289"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/change-policy/">Change Policy</a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475 mean-last"><a data-role="none" data-role="none" href="https://fightcolorectalcancer.org/join-fight/change-policy/register-advocate/">Register as an Advocate</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
</ul>
<a data-role="none" class="mean-expand" href="#" style="font-size: 2rem">+</a>
</li>
</ul>
</div>
</div>
</nav></div></ul> jQuery(document).ready(function() {
// Open/Close mobile menu icon
jQuery("a.meanmenu-reveal").click(function() {
// Toggle Class that changes icon
jQuery(this).toggleClass('meanclose');
// Toggles Top level Mobile Menu
jQuery('ul#menu-primary-menu').slideToggle(400);
});
// Loops each Parent li element
jQuery('li#mobile-menu-item').each(function(index, element) {
// Child Sub-Menu Open/Close Button
jQuery(this).children('a.mean-expand').click(function() {
// Plus or Minus Symbol class
jQuery(this).toggleClass('mean-clicked');
// Changes symbol on open/close
var txt = jQuery(this).is('.mean-clicked') ? '–' : '+';
jQuery(this).text(txt);
// Toggles Parent Sub-Menu Dropdown
jQuery(this).prev('ul.sub-menu').slideToggle(400);
});
});
// Loops each Sub Menu li element
jQuery('li#sub-menu-item').each(function(index, element) {
// Child Sub-Menu Open/Close Button
jQuery(this).children('a.mean-expand').click(function() {
// Plus or Minus Symbol class
jQuery(this).toggleClass('mean-clicked');
// Changes symbol on open/close
var txt = jQuery(this).is('.mean-clicked') ? '–' : '+';
jQuery(this).text(txt);
// Toggles Child Sub-Menu Dropdown
jQuery(this).prev('ul.sub-menu').slideToggle(400);
});
});
});以上是关于javascript 具有2个LVL下拉菜单的移动菜单的主要内容，如果未能解决你的问题，请参考以下文章
delphi的mainmenu，点击下拉菜单，会向右下角移动的问题
利用JavaScript+DIV+CSS实现下拉菜单。当鼠标移动到菜单选项的时候显示对应的DIV：function show(menu)。当鼠标移出的时候隐藏所有的DIV：function hide(