对于某些原因,我无法使用嵌套的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/

10-12 12:55
查看更多