对于某些原因,我无法使用嵌套的div,并且我试图切换divs树
Div ID包含任何字符串,但-
<div class="tree">
<div id="a">id=a click to toggle child</div>
<div id="a-1"> == id=a-1</div>
<div id="a-1-f"> == == id=a-1-f</div>
<div id="a-1-g"> == == id=a-1-g</div>
<div id="a-2"> == id=a-2</div>
<div id="b">id=b</div>
</div>
$('.tree').children().on('click',function(){
var $id = $(this).attr('id');
$(this).parent().children().removeClass('on');
$(this).toggleClass('on');
$('[id^='+$id+'-]').hide();
var str = /^[a-zA-Z0-9]*$/;
if ($(this).hasClass('on')) {
$('[id^='+$id+'-'+ str +']').show();
}
});
我应该为上面的js中的str做些什么
http://jsfiddle.net/cn856y49/4/
我想做的是:单击上方的任何div:隐藏其所有子代和孙代,或仅显示其子代。
Hide现在正在工作。但是我不确定如何使表演正常。
例如,点击id = a将隐藏所有id = a-1,a-xx-xx等,再次点击id = a将仅显示其下一级孩子
最佳答案
首先要在所有节点上删除类on
,然后在当前节点上切换on
。因此,它将始终打开。下面是应该做的细微修改的版本。 div的初始状态不正确,但是您可以从此处获取它。
$('.tree').children().on('click',function(){
var $id = $(this).attr('id');
var on = !($(this).hasClass('on')); // toggle "on"
$(this).parent().children().removeClass('on');
$('[id^='+$id+'-]').hide();
var str = /^[a-zA-Z0-9]*$/;
if (on) {
$(this).addClass('on');
$('[id^='+$id+']').show();
}
});
关于javascript - jQuery正则表达式问题匹配任何字符串a-zA-Z0-1,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32517886/