在Wordpress生成的表单中展开和折叠列表元素的奇怪问题
Strange issues with expanding and collapsing list elements in a Wordpress generated form
我希望有人能告诉我A)是什么导致了当前的问题B)一个更优雅的解决方案对于以下问题:
我正在从Wordpress博客中提取所有页面,其想法是创建一个菜单,其中子导航随着用户交互而扩展和收缩。
嵌套菜单标记基本上如下:
<nav id="projects">
<ul class="menu">
<li class="page_item page-item-249">
<a href="...">Selected projects</a>
<ul class="children">
<li class="page_item page-item-298"><a href="..." >Level 2</a></li>
<li class="page_item page-item-263"><a href="..." >Level 2</a></li>
<li class="page_item page-item-212"><a href="..." >Level 2</a></li>
</ul>
</li>
<li class="page_item page-item-238">
<a href="...">Archive</a>
<ul class="children">
<li class="page_item page-item-33">
<a href="...">Level 2</a>
<ul class="children">
<li class="page_item page-item-46"><a href="...">Level 3</a></li>
<li class="page_item page-item-48"><a href="...">Level 3</a></li>
</ul>
</li>
<li class="page_item page-item-35">
<a href="...">Level 2</a>
<ul class="children">
<li class="page_item page-item-52"><a href="...">Level 3</a></li>
<li class="page_item page-item-57"><a href="...">Level 3</a></li>
<li class="page_item page-item-59"><a href="...">Level 3</a></li>
<li class="page_item page-item-61"><a href="...">Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
jQuery的设置如下:
$(".page_item a").click( function(){
/* Set vars */
var $this = $(this);
var isActive = false;
var hasSublinks = false;
var nextLevel = $(this).next("ul");
if ( $this.next().html() !== null ) {hasSublinks = true;}
if ( $this.hasClass('active') ) {isActive = true;}
if ( !hasSublinks ) {
return true;
} else {
/* I have sub links... */
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
$(this).next("ul").slideDown();
$(this).addClass('active');
} else {
$(nextLevel).slideUp();
$(this).removeClass('active');
}
return false;
}
});
当我点击'Archive'时,它会按预期展开它的子列表。然而,当我点击这里的链接时,我希望它向下滑动并显示下一关(第3关),但它的效果与向上滑动相反回到我开始的地方。
我花了很多时间在控制台,在Wordpress Codex上试图找出可能的问题,对我来说特别具有挑战性的是,这段代码之前是工作的(或似乎)。我知道代码不是最干净的,所以我真的希望能告诉我哪里出了问题!
谢谢
你似乎没有类活动的任何地方,所以当你这样做:
if ( $this.hasClass('active') ) {isActive = true;}
将Active设置为false
所以你进入这部分代码:
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
你的逻辑显然有问题,试着修复它,如果你什么也找不到,我会给你提示
相关文章:
- 将列表元素动画制作到顶部
- 使用Razor和javascript来获得下拉列表元素
- 根据列表元素的值使用JQuery获取列表元素
- 将列表元素动态添加到ul元素中
- 使用 jquery 库获取锚点列表元素内的文本
- 在没有大量回调函数的情况下在列表元素上循环播放同一动画
- 使用JSON和JavaScript添加额外的html列表元素
- 范围和列表元素在 DIV 中换行
- jQuery:影响相同深度的列表元素
- 所选列表元素不会保持选中状态(通过ajax请求更新后)
- 一次显示n个列表元素,jQuery
- 将列表元素宽度设置为文本宽度
- 选择列表元素(捕获向下/向上箭头)
- 限制要在嵌套列表jQuery中添加的列表元素的数量
- 如何从有序列表中选择一个列表元素
- 将列表元素 onclick 事件绑定到单选输入
- 排序元素折叠和内容重新加载
- 每个列表元素的角度
- 在Wordpress生成的表单中展开和折叠列表元素的奇怪问题
- 当前列表可折叠,父元素可选