Question

我正在为朋友建立一个个人网站，他的投资组合页面有很多部分。所以我想为内容创建一个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文件。请帮忙！感谢

Answer 1

jQuery不会在您的网站上使用$别名。您可以通过在document.ready函数中包含一个参数来实现。

试试这个：

jQuery(function($){

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

  ...

});

Wordpress网站上的JS手风琴菜单

1 个答案: