Codepenメニューは正常に動作しますが、空白のページでは機能しません

Question

私は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; } 

Answer 1

サイトでは、このコードは、関連したときにと指示されていません。 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); 
     } 
    }); 
});