JS меню аккордеона на сайте wordpress

Question

Я создаю персональный сайт для друга, и у него есть много штук для его страницы портфолио. Поэтому я хотел создать раздел аккордеона JS для контента. По сути работает как меню, но при нажатии на родителя он будет показывать встроенные видео юность, его резюме, и т.д ..

Вот это JS

$(function(){ 

$('#cssmenu > ul > li:has(ul)').addClass("has-sub"); 

$('#cssmenu > ul > li > a').click(function() { 
var checkElement = $(this).next(); 

$('#cssmenu li').removeClass('active'); 
$(this).closest('li').addClass('active'); 


if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
    $(this).closest('li').removeClass('active'); 
    checkElement.slideUp('normal'); 
} 

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
    $('#cssmenu ul ul:visible').slideUp('normal'); 
    checkElement.slideDown('normal'); 
} 

if (checkElement.is('ul')) { 
    return false; 
} else { 
    return true; 
}  
}); 

}); 

Вот HTML-

<div id="cssmenu"> 
<ul> 
    <li><a href="#"><span>Résumé</span></a> 
<ul> 
     <li><a href="#"><span>content</span></a></li> 
</ul> 
</li> 
    <li><a href="#"><span>Video Reel</span></a> 
<ul> 
     <li><span>content2</span></li> 
</ul> 
</li> 
    <li><a href="#"><span>Writing Clips</span></a> 
<ul> 
     <li><a href="#"><span>Piece1</span></a> 
<ul> 
      <li>Content1</li> 
</ul> 
</li> 
     <li><a href="#"><span>Piece2</span></a> 
<ul> 
      <li>Content2</li> 
</ul> 
</li> 
     <li><a href="#"><span>Piece3</span></a> 
<ul> 
      <li>Content3</li> 

</ul> 

</li> 

</ul> 

</li> 

</ul> 

</div> 

А вот CSS

#cssmenu li, 
    #cssmenu a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    font-weight: normal; 
    text-decoration: none; 
    line-height: 1; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 14px; 
    position: relative; 
} 
#cssmenu a { 
    line-height: 1.3; 
} 
/*First-level menu*/ 
#cssmenu { 
    width: 100%; 
} 
#cssmenu > ul > li > a { 
    padding-right: 40px; 
    font-size: 25px; 
    font-weight: bold; 
    display: block; 
    background: #bd0e36; 
    color: #000000; 
    border-bottom: 1px solid #5e071b; 
    text-transform: uppercase; 
    position: relative; 
} 
#cssmenu > ul > li > a > span { 
    background: #ed1144; 
    padding: 10px; 
    display: block; 
    font-size: 13px; 
    font-weight: 300; 
} 
#cssmenu > ul > li > a:hover { 
    text-decoration: none; 
} 
#cssmenu > ul > li.active { 
    border-bottom: none; 
} 
#cssmenu > ul > li.active > a { 
    color: #fff; 
} 
#cssmenu > ul > li.active > a span { 
    background: #bd0e36; 
} 
#cssmenu span.cnt { 
    position: absolute; 
    top: 8px; 
    right: 15px; 
    padding: 0; 
    margin: 0; 
    background: none; 
} 
/*Second-level menu*/ 
#cssmenu ul ul { 
    display: none; 
} 
#cssmenu ul ul li { 
    border: 1px solid #e0e0e0; 
    border-top: 0; 
} 
#cssmenu ul ul a { 
    padding: 10px; 
    display: block; 
    color: #ffffff; 
    font-size: 13px; 
} 
#cssmenu ul ul a:hover { 
    color: #bd0e36; 
} 
#cssmenu ul ul li.odd { 
    background: #B3D4FC; 
} 
#cssmenu ul ul li.even { 
    background: #B3D4FC; 
} 

страница, что я работаю на это: http://aaroncmansfield.com/portfolio/

Я не уверен, почему уровни меню не сбрасываются, когда я нажимаю. Я добавил плагин на сайт wordpress, который позволяет мне добавить правильный код в заголовок, чтобы прочитать файл .js. Пожалуйста помоги! Thanks

Answer 1

jQuery не был наложен аэратором $ на вашем сайте. Вы можете сделать это, включив аргумент в свою функцию document.ready.

Попробуйте это:

jQuery(function($){ 

    $('#cssmenu > ul > li:has(ul)').addClass("has-sub"); 

    ... 

});