jQuery在父li中单击div时显示嵌套的ul

我试图获得一个隐藏的嵌套ul来显示当它的父li中的div被点击时，并且我有一段时间了。 原样，嵌套的ul的初始隐藏工作，div背景图像切换正常，但没有其他工作。 有什么建议？

目前的代码如下：

HTML：

 
 
1 
 
a
 
b
 
 
 
i
 
ii
 
iii
 
 c 
 
 
 
2
 
3 
 
a
 
b
 
c
 
 
 
  

相关CSS：

 .buttonShow { display: inline-block; background: url("../assets/images/plus.png") no-repeat scroll top left; width: 9px; height: 9px; } .buttonHide { display: inline-block; background: url("../assets/images/minus.png") no-repeat scroll top left; width: 9px; height: 9px; } 

jQuery的：

 $(document).ready(function(){ $('.subField').hide(); $('.buttonShow').click(function() { $(this).toggleClass('buttonHide'); $(this).parent().next('.subField').show('slow'); }); $('.buttonHide').click(function() { $(this).parent().next('.subField').hide('slow'); }); }); 

非常感谢！

Answer 1

尝试

 $(document).ready(function () { $('.subField').hide(); //use event delegation since classes are changed dynamically $('#branches').on('click', '.buttonShow', function () { //remove the show class and assign hidden $(this).toggleClass('buttonHide buttonShow'); //the subfield is a child of the parent not the next sibling $(this).siblings('.subField').show('slow'); }); $('#branches').on('click', '.buttonHide', function () { $(this).toggleClass('buttonHide buttonShow'); $(this).siblings('.subField').hide('slow'); }); }); 

演示： 小提琴

Answer 2

尝试

 $(document).ready(function(){ $('.subField').hide(); $('.browseFields').on("click" , ".buttonShow" , function() { $(this).removeClass('buttonShow').addClass("buttonHide"); $(this).parent().find('.subField').show('slow'); }); $('.browseFields').on("click" , ".buttonHide" , function() { $(this).removeClass('buttonHide').addClass("buttonShow"); $(this).parent().find('.subField').hide('slow'); }); }); 

Answer 3

您也可以尝试合并点击处理程序

 $(document).ready(function () { $('.subField').hide(); //use event delegation since classes are changed dynamically $('#branches').on('click', '.buttonShow, .buttonHide', function () { $(this).hasClass('buttonShow') ? $(this).siblings('.subField').show('slow') : $(this).siblings('.subField').hide('slow'); $(this).toggleClass('buttonHide buttonShow'); }); }); 

Answer 4

我在这里创造了一个工作小提琴。 请查看http://jsfiddle.net/rwb75/9/

我在你的jQuery中做了一些改变。 我也在你的HTML中做了一些改变。 我在

1

放置了

1

锚标记。

  $(document).ready(function(){ $('.subField').hide(); $(document).on("click",".buttonShow",function(e) { $(this).addClass('buttonHide'); $(this).removeClass('buttonShow'); $(this).closest('li').find('.subField').eq(0).show('slow'); }); $(document).on("click",".buttonHide",function(e) { debugger $(this).addClass('buttonShow'); $(this).removeClass('buttonHide'); $(this).closest('li').find('.subField').eq(0).hide('slow'); }); });