wordpress 网站上的 JS 手风琴菜单答案

【问题标题】：JS accordion menu on wordpress sitewordpress 网站上的 JS 手风琴菜单
【发布时间】：2013-12-18 20:52:42
【问题描述】：

我正在为一个朋友建立一个个人网站，他的作品集页面有很多作品。所以我想为内容创建一个 JS 手风琴部分。本质上是一个菜单，但是当点击父级时，它会显示一个 youtube 嵌入视频、他的简历等。

这里是 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 文件。请帮忙！谢谢

【问题讨论】：

"Uncaught TypeError: Property '$' of object [object Object] 不是函数"

标签： javascript jquery wordpress menu accordion

【解决方案1】：

jQuery 在您的网站上没有使用 $ 的别名。您可以通过在 document.ready 函数中包含一个参数来做到这一点。

试试这个：

jQuery(function($){

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

  ...

});

【讨论】：