Javascript 设置无序列表的样式和折叠

我有一个无序的列表，我想在父对象上进行扩展和折叠，但在子对象上不进行扩展和折叠。由于缺少更好的术语，该列表只列出了孩子，没有孙子，因此没有必要扩大或缩小到这个水平

当前，在这个示例中，当我单击箭头或文本时，父对象会折叠并展开，这正是我想要的行为。但是，当单击其中一个子项复选框时，这也会导致父项崩溃。这不是期望的效果。另外，请注意选择复选框文本与复选框本身的行为差异。实际上，我想在选中复选框（包括标签）时启动一些额外的javascript，稍后需要添加这些复选框

$（文档）.ready（函数（）{
$（'#main li ul'）.hide（）；
$（'#colorsec'）。查找（'UL'）。显示（）；
$（'#coldiv li'）。单击（函数（）{
$（this）.children（'ul'）.slideToggle（“fast”）；
$（'.colopen.colclosed'）.toggleClass（'colopen colclosed'）；
});
$（'#proddiv li'）。单击（函数（）{
$（this）.children（'ul'）.slideToggle（“fast”）；
$（'.prodopen.prodclosed'）.toggleClass（'prodopen-prodclosed'）；
});
$（'#graindiv li'）。单击（函数（）{
$（this）.children（'ul'）.slideToggle（“fast”）；
$（'.grainopen.grainclosed'）.toggleClass（'grainopen grainclosed'）；
});
$（'#findiv li'）。单击（函数（）{
$（this）.children（'ul'）.slideToggle（“fast”）；
$（'.finopen.finclosed'）.toggleClass（'finopen-finclosed'）；
});
});
#换页{
显示：无；
}
/*这将删除列表项的污损图像*/
#换页>ul>li{
列表样式：无；
}
/*这将删除我们放置在上面列表项上的图像*/
#子列表{
列表样式：无；
光标：指针；
左边距：-2米；
}
#主要{
字体系列：HelveticaNeueLT Medium，Museo-500，Helvetica，Arial，无衬线；
}
.海关检查{
字体系列：HelveticaNeueLT Light，Museo-500，Helvetica，Arial，无衬线；
}
#主要{
光标：指针；
}
#彩色笔{
列表样式图像：url（'http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#色秒{
列表样式图像：url（'http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#productsec.prodopen{
列表样式图像：url（'http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#productsec.prodclosed{
列表样式图像：url（'http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#grainsec.grainopen{
列表样式图像：url（'http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#grainsec.grainclosed{
列表样式图像：url（'http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}
#finsec.finopen{
列表样式图像：url（'http://s6.postimg.org/3ps5fdti5/Up_Arrow.jpg');
}
#finsec.finclosed{
列表样式图像：url（'http://s6.postimage.org/53jsaosrh/Down_Arrow.jpg');
}



颜色


红色


橙色


棕色的


米色


白色


灰白色


粉红色


紫色


灰色


黑色


蓝色


绿色


黄色的



产品

安第斯山脉

萨布里娜

沃洛

公爵

玛丽莎



颗粒

提高

满满的

平坦的

宣告

纠正



完成

没有

轻的

轻蜡

卵石

沉重的




您可以使用
停止播放
来防止不必要的行为。如果需要，它仍然允许您在这些元素上添加行为。见：