WordPress中的自定义菜单无法正常工作,任何人都可以告诉我原因

custom menu in wordpress not working properly, can any one tell me why?

本文关键字:工作 任何人 都可以 告诉我 自定义 菜单 常工作 WordPress      更新时间:2023-09-26

这是我正在使用的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>

j查询代码

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");
});

云服务器代码

.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;
    }
}

你的问题肯定与.before()有关。

它应该用于«在匹配元素集中的每个元素之前插入由参数指定的内容。参考。

我不认为它会将元素(或集合)返回到像.click()处理程序这样的链式方法。