我正在使用效果很好的jquery checkboxtree plugin。我有一种情况,我想以编程方式扩展某些节点。
我看到我可以通过Id来做,例如:
$('#tabs-5-expand').click(function(){
$('#tree5').checkboxTree('expand', $('#tabs-5-node23'));
});
我希望我可以使用像这样的类名来扩展多个节点
$('#tabs-5-expand').click(function(){
$('#tree5').checkboxTree('expand', $('.bluetabs'));
});
但它似乎没有做任何事情。有没有人知道是否有办法使用类选择器以编程方式扩展或折叠节点?
答案 0 :(得分:1)
Check this fiddle并取消注释处理程序,一次一个。正确的方法是迭代 元素的数组。查看评论以获取更多信息。
<ul id="tree6">
<li><input type="checkbox" checked><label>Root</label>
<ul>
<li class="bluetabs"><input type="checkbox"><label>Node 1</label>
<ul>
<li><input type="checkbox"><label>Node 1.1</label></li>
</ul>
</li>
<li><input type="checkbox" checked><label>Node 2</label>
<ul>
<li><input type="checkbox"><label>Node 2.1</label></li>
<li><input type="checkbox"><label>Node 2.2</label></li>
<li class="bluetabs"><input type="checkbox"><label>Node 2.3</label>
<ul>
<li><input type="checkbox"><label>Node 2.3.1</label></li>
<li><input type="checkbox"><label>Node 2.3.2</label></li>
</ul>
</li>
<li><input type="checkbox"><label>Node 2.4</label></li>
<li><input type="checkbox"><label>Node 2.5</label></li>
<li><input type="checkbox"><label>Node 2.6</label></li>
</ul>
</li>
</ul>
</li>
</ul>
<button id="test">Press to expand</button>
$('#tree6').checkboxTree({
initializeChecked: 'expanded',
initializeUnchecked: 'collapsed'
});
//If all the bluetabs are collapsed this will work. If you expand one of the blue ones, then it won't work for the other.
$('#test').click(function() {
$('#tree6').checkboxTree( 'expand', $('.bluetabs') );
});
//This will work regardless
$('#test').click(function() {
$('.bluetabs').each(function() {
$('#tree6').checkboxTree( 'expand', $(this) );
});
});