这是我正在使用的js小提琴 https://jsfiddle.net/bLw6sa4w/ 每当我点击之前的元素都会正确显示菜单但由于某种原因，当我点击内部元素时，显示类被删除
<nav class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-4"><a href="http://localhost/airconworld/">Home</a></li>
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="http://localhost/airconworld/about-us/">About Us</a></li>
<li id="menu-item-233" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-233"><a>Services</a>
<ul class="sub-menu display">
<li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230"><a href="http://localhost/airconworld/maintenance/">Maintenance</a></li>
<li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="http://localhost/airconworld/installation/">Installation</a></li>
</ul>
</li>
<li id="menu-item-52" class="megamenu col-4 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-52"><a>Air Conditioners</a>
<ul class="sub-menu">
<li id="menu-item-100" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-100"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/">Split System Air conditioners</a>
<ul class="sub-menu">
<li id="menu-item-101" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-101"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/actron/">Actron</a></li>
<li id="menu-item-102" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-102"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/carrier/">Carrier</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-103"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/daikin/">daikin</a></li>
<li id="menu-item-104" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-104"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/fujitsu/">Fujitsu</a></li>
<li id="menu-item-105" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-105"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/hitachi/">Hitachi</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-106"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/mitsubishi-electric/">Mitsubishi Electric</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-107"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/mitsubishi-heavy-industries/">Mitsubishi Heavy Industries</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-108"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/samsung/">Samsung</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-109"><a href="http://localhost/airconworld/product-category/split-system-air-conditioners/toshiba/">Toshiba</a></li>
</ul>
</li>
<li id="menu-item-83" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-83"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/">Ducted Air conditioners</a>
<ul class="sub-menu">
<li id="menu-item-84" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-84"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/actron-ducted-air-conditioners/">Actron</a></li>
<li id="menu-item-85" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-85"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/carrier-ducted-air-conditioners/">Carrier</a></li>
<li id="menu-item-86" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-86"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/daikin-ducted-air-conditioners/">Daikin</a></li>
<li id="menu-item-87" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-87"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/fujitsu-ducted-air-conditioners/">Fujitsu</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-88"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/hitachi-ducted-air-conditioners/">Hitachi</a></li>
<li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-89"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/mitsubishi-electric-ducted-air-conditioners/">Mitsubishi Electric</a></li>
<li id="menu-item-90" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-90"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/mitsubishi-heavy-industries-ducted-air-conditioners/">Mitsubishi Heavy Industries</a></li>
<li id="menu-item-91" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-91"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/samsung-ducted-air-conditioners/">Samsung</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-92"><a href="http://localhost/airconworld/product-category/ducted-air-conditioners/toshiba-ducted-air-conditioners/">Toshiba</a></li>
</ul>
</li>
<li id="menu-item-93" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93"><a href="http://localhost/airconworld/product-category/multi-type-systems/">Multi Type Systems</a>
<ul class="sub-menu">
<li id="menu-item-94" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94"><a href="http://localhost/airconworld/product-category/multi-type-systems/daikin-multi-type-systems/">Daikin</a></li>
<li id="menu-item-95" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-95"><a href="http://localhost/airconworld/product-category/multi-type-systems/fujitsu-multi-type-systems/">Fujitsu</a></li>
<li id="menu-item-96" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-96"><a href="http://localhost/airconworld/product-category/multi-type-systems/hitachi-multi-type-systems/">Hitachi</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-97"><a href="http://localhost/airconworld/product-category/multi-type-systems/mitsubishi-electric-multi-type-systems/">Mitsubishi Electric</a></li>
<li id="menu-item-98" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-98"><a href="http://localhost/airconworld/product-category/multi-type-systems/mitsubishi-heavy-industries-multi-type-systems/">Mitsubishi Heavy Industries</a></li>
<li id="menu-item-99" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-99"><a href="http://localhost/airconworld/product-category/multi-type-systems/toshiba-multi-type-systems/">Toshiba</a></li>
</ul>
</li>
<li id="menu-item-73" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-73"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/">Ceiling/Floor Console Air conditioners</a>
<ul class="sub-menu">
<li id="menu-item-74" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-74"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/daikin-ceilingfloor-console-air-conditioners/">Daikin</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-75"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/fujitsu-ceilingfloor-console-air-conditioners/">Fujitsu</a></li>
<li id="menu-item-76" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-76"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/hitachi-ceilingfloor-console-air-conditioners/">Hitachi</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-77"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/mitsubishi-electric-ceilingfloor-console-air-conditioners/">Mitsubishi Electric</a></li>
<li id="menu-item-78" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-78"><a href="http://localhost/airconworld/product-category/ceilingfloor-console-air-conditioners/mitsubishi-heavy-industries-ceilingfloor-console-air-conditioners/">Mitsubishi Heavy Industries</a></li>
</ul>
</li>
<li id="menu-item-65" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-65"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/">Ceiling Cassette Air conditioners</a>
<ul class="sub-menu">
<li id="menu-item-66" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-66"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/daikin-ceiling-cassette-air-conditioners/">Daikin</a></li>
<li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-67"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/fujitsu-ceiling-cassette-air-conditioners/">Fujitsu</a></li>
<li id="menu-item-68" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-68"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/hitachi-ceiling-cassette-air-conditioners/">Hitachi</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-69"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/mitsubishi-electric-ceiling-cassette-air-conditioners/">Mitsubishi Electric</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-70"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/mitsubishi-heavy-industries-ceiling-cassette-air-conditioners/">Mitsubishi Heavy Industries</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-71"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/samsung-ceiling-cassette-air-conditioners/">Samsung</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-72"><a href="http://localhost/airconworld/product-category/ceiling-cassette-air-conditioners/toshiba-ceiling-cassette-air-conditioners/">Toshiba</a></li>
</ul>
</li>
<li id="menu-item-79" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-79"><a href="http://localhost/airconworld/product-category/cooling-only-split-systems/">Cooling Only Split Systems</a>
<ul class="sub-menu">
<li id="menu-item-80" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-80"><a href="http://localhost/airconworld/product-category/cooling-only-split-systems/daikin-cooling-only-split-systems/">Daikin</a></li>
<li id="menu-item-81" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-81"><a href="http://localhost/airconworld/product-category/cooling-only-split-systems/fujitsu-cooling-only-split-systems/">Fujitsu</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-82"><a href="http://localhost/airconworld/product-category/cooling-only-split-systems/mitsubishi-heavy-industries-cooling-only-split-systems/">Mitsubishi Heavy Industries</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="http://localhost/airconworld/gallery/">Gallery</a></li>
<li id="menu-item-228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-228"><a href="http://localhost/airconworld/faqs/">FAQ’s</a></li>
<li id="menu-item-229" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-229"><a href="http://localhost/airconworld/testimonials/">Testimonials</a></li>
<li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-226"><a href="http://localhost/airconworld/contact-us/">Contact Us</a></li>
</ul></nav>
jquery代码
jQuery(document).ready(function(){
jQuery( "#menu-main-menu" ).before().click(function() {
jQuery( "#menu-main-menu > li" ).toggleClass("display");
});
});
jQuery( ".dropdown" ).before().click(function() {
jQuery(".dropdown > ul").toggleClass("display");
});
css代码
.menu-main-menu-container {
border-top: 4px solid #FC8A31;
background: #000;
margin-bottom: 1.4em;
}
#menu-main-menu:after {
content: '';
display: table;
width: 100%;
clear: both;
}
#menu-main-menu {
max-width: 1170px;
padding: 0 15px;
margin: auto;
position: relative;
}
.menu-main-menu-container ul {
list-style: none;
padding-left: 0px;
}
#menu-main-menu > li {
float: left;
}
#menu-main-menu a {
color: #fff;
display: block;
padding: 0.7em 0.7em;
}
#menu-main-menu > li.dropdown {
position: relative;
}
#menu-main-menu > li > ul {
position: absolute;
top: 100%;
background: rgba(75, 117, 169, 0);
height: 0px;
z-index: 999;
overflow: hidden;
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
}
#menu-main-menu > li.dropdown:hover > ul {
display: block;
height: auto;
background: rgba(75, 117, 169, 0.9);
overflow: visible;
}
#menu-main-menu > li.megamenu > ul {
width: 100%;
max-width: 1140px;
margin-left: 15px;
left: 0;
background: rgba(75, 117, 169, 0);
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
}
#menu-main-menu > li.megamenu:hover > ul {
display: block;
height: auto;
background: #eee;
overflow: visible;
}
#menu-main-menu > li.megamenu > ul > li {
width: 25%;
float: left;
height: 285px;
}
#menu-main-menu > li.megamenu > ul > li > a {
font-weight: bold;
margin: 20px 0 5px 0;
}
#menu-main-menu > li.megamenu > ul > li a{
padding: 0px 5px;
margin-left: 15px;
color: #000;
}
#menu-main-menu > li.megamenu > ul > li:nth-of-type(4):after {
content: "";
display: table;
clear: both;
}
.current_page_item a {
background: #FC8A31;
}
#menu-main-menu > li:hover > a{
background: #eee;
color: #000;
}@media (max-width: 767px){
#menu-main-menu:before{
content: "\f20e";
display: block;
width: 100%;
display: block;
text-align: right;
font-family: "Ionicons";
color: #fff;
font-size: 28px;
height: 40px;
line-height: 40px;
}
.menu-main-menu-container > ul > li{
display: none;
}
#menu-main-menu > li{
float: none;
display: none;
border-bottom: 1px solid;
}
#menu-main-menu > li.dropdown:before{
position: absolute;
width: 24px;
height: 24px;
right: 0;
content: "\f3d0";
font-family: "Ionicons";
color: #fff;
top: 11.5px;
line-height: 26px;
text-align: center;
border-radius: 50%;
background: rgba(255,255,255,0.2);
z-index: 999;
}
.display{
display: block !important;
}
#menu-main-menu > li > ul{
height:auto;
display:none;
position:static;
}
}