Codepen菜单工作正常，但不适用于空白页面

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Codepen菜单工作正常，但不适用于空白页面相关的知识，希望对你有一定的参考价值。

我在Codepen中创建了一个CSS / JS下拉菜单。菜单在Codepen中工作正常：https://codepen.io/jabbamonkey/pen/EXNQYB

但是，当我将所有内容放在空白的php页面上时...代码不起作用：http://tbsmb.school/_temp.php

什么出了什么问题？

菜单代码：

    <div id="mainmenu">
    <ul id="menu" class="menu">
        <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children first menu-item-143"><a href="#">About</a>
            <ul class="sub-menu">
                <li id="menu-item-113" class="menuico-apple menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="/about/welcome/">Welcome</a></li>
                <li id="menu-item-114" class="menuico-vision menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="/about/vision/">Vision</a></li>
                <li id="menu-item-115" class="menuico-approach menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="/about/approach/">Approach</a></li>
                <li id="menu-item-116" class="menuico-team menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="/about/administration/">Administration</a></li>
                <li id="menu-item-117" class="menuico-press menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="/about/press/">Press</a></li>
                <li id="menu-item-118" class="menuico-employ menu-item menu-item-type-post_type menu-item-object-page menu-item-118"><a href="/about/employment/">Employment</a></li>
                <li id="menu-item-119" class="menuico-resources menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="/about/resources/">Resources</a></li>
                <li id="menu-item-120" class="menuico-contact menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="/about/contact/">Contact</a></li>
            </ul>
        </li>
        <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-144"><a href="#">Admissions</a>
            <ul class="sub-menu">
                <li id="menu-item-142" class="menuico-visit menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="/admissions/visit-us/">Visit Us</a></li>
                <li id="menu-item-121" class="menuico-enroll menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="/admissions/enrollment/">Enrollment</a></li>
                <li id="menu-item-122" class="menuico-tuition menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="/admissions/tuition/">Tuition</a></li>
                <li id="menu-item-123" class="menuico-fineprint menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="/admissions/fine-print/">Fine Print</a></li>
                <li id="menu-item-124" class="menuico-faq menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="/admissions/faq/">FAQ</a></li>
            </ul>
        </li>
        <li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-145"><a href="#">Programs</a>
            <ul class="sub-menu">
                <li id="menu-item-146" class="menuico-afterschool menu-item menu-item-type-post_type menu-item-object-page menu-item-146"><a href="/programs/after-school/">After-School</a></li>
                <li id="menu-item-147" class="menuico-camp menu-item menu-item-type-post_type menu-item-object-page menu-item-147"><a href="/programs/camp/">Camp</a></li>
                <li id="menu-item-149" class="menuico-parentchild menu-item menu-item-type-post_type menu-item-object-page menu-item-149"><a href="/programs/parent-child/">Parent-Child</a></li>
                <li id="menu-item-148" class="menuico-parenttobe menu-item menu-item-type-post_type menu-item-object-page menu-item-148"><a href="/programs/parents-to-be/">Parents-to-be</a></li>
                <li id="menu-item-150" class="menuico-family menu-item menu-item-type-post_type menu-item-object-page menu-item-150"><a href="/programs/family/">Family</a></li>
            </ul>
        </li>
        <li id="menu-item-151" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-151"><a href="#">Support</a>
            <ul class="sub-menu">
                <li id="menu-item-152" class="menuico-pto menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="/support/pto/">PTO</a></li>
                <li id="menu-item-153" class="menuico-give menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="/support/ways-to-give/">Ways to Give</a></li>
                <li id="menu-item-154" class="menuico-schol menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="/support/scholarships/">Scholarships</a></li>
            </ul>
        </li>
        <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page last menu-item-155"><a href="/calendar/">Calendar</a></li>
    </ul>
</div>

JS

$('.menu li > .sub-menu').parent().click(function() {
  var submenu = $(this).children('.sub-menu');
  if ( $(submenu).is(':hidden') ) {
    $(submenu).slideDown(200);
  } else {
    $(submenu).slideUp(200);
  }
});

STYLES

.menu { vertical-align:middle; text-align:left; padding: 0 0 0 8px; margin: 0; list-style: none; position:relative; }
  .menu li { position:relative; font-size:24px; display:inline-block; padding:0; line-height:1; vertical-align:top; margin:0; } 
  .menu li a { display:block; padding:32px 25px 30px 25px; margin:0; color:#282828; text-transform:uppercase; text-decoration:none; }
  /* Hover */
  .menu li:hover > a { color: #282828; background-color:#c3def1; }

/* Sub-menu */
/* .menu li:hover > ul { display: block; } */
.menu .sub-menu { display:none; }
.menu .sub-menu { list-style: none; margin: 0; padding: 0; position: absolute; top: 86px; left:0px; z-index: 99999; background-color:#87bde4; }
    .menu ul li { float: none; margin:0; padding:0; display: block; font-size: 22px; text-align: left; }
    .menu ul li a { border:0; text-transform:none;  }
    .menu ul a { padding: 22px 16px 17px 46px !important; min-width: 280px; height: auto; line-height: 1; display: block; color:#282828; }
    .menu ul a:hover { background-color:#9ac9eb; }

/* Hide Tertiary Menus */
.menu ul ul { display:none; opacity: 0; visibility: hidden; }
答案

当该代码相关时，该网站尚未被指示。在codepen中，除非另有说明，否则假定javascript区域中的代码在代码运行时运行。

用这个：

$(document).ready(function () {
    $('.menu li > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
});

以上是关于Codepen菜单工作正常，但不适用于空白页面的主要内容，如果未能解决你的问题，请参考以下文章

引导下拉菜单不适用于 ajax

JQuery Mobile适用于浏览器，但不适用于手机

表格字段不适用于woocommerce中移动视图的结帐页面

用于输入时间的Javascript代码[重复]

Bootstrap 多选不适用于剔除绑定

函数适用于双引号，但不适用于单引号