我有一些HTML:)
<div class="categories">
<div class="list-group">
<a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
<a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
<a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon glyphicon-chevron-right indent2"></span><span>Sub category</span></a>
<a class="list-group-item child" id="433" style="display: none;"><span class="glyphicon indent3"></span><span>Super sub</span></a>
<a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon glyphicon-chevron-right indent1"></span><span>Videos</span></a>
<a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
<a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
</div>
</div>
我有这个功能:
$(".glyphicon", treeRoot).on('click', function (e) {
e.stopPropagation();
var $glyph = $(this);
var $item = $glyph.parent();
var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];
if (indent != undefined) {
var $children = $item.nextUntil("a:has(." + indent + ")");
if ($glyph.hasClass("glyphicon-chevron-right")) {
$glyph
.addClass('glyphicon-chevron-down')
.removeClass("glyphicon-chevron-right");
if ($children != null) $children.show();
} else {
$glyph
.addClass('glyphicon-chevron-right')
.removeClass("glyphicon-chevron-down");
if ($children != null) $children.hide();
}
}
});
所以基本上,当点击图标时,它会显示或隐藏孩子。 问题是,它显示了所有孩子(indent2和indent3),但我只是想让它显示直接的孩子(在这个例子中为indent2)。
有人能给我一些关于如何做到这一点的见解吗?
干杯,
/ r3plica
答案 0 :(得分:1)
尝试
var num = parseInt(indent.match(/(\d+)$/)[1], 10);
var $children = $item.nextUntil("a:not(:has(.indent" + (num + 1) + "))");
演示:Fiddle