Question

在<div>内有一个无序的3个项目列表，例如A，B和C.现在，如果我选择一个选项A，它应该再次在同一<div>内显示P，Q和R的列表，如果我选择B，它应该显示一个无序的X，Y和Z列表加上它应该有还有一个后退按钮。

<div>
    <ul>
        <li><a href="#">A</li>
        <li><a href="#">B</li>
        <li><a href="#">C</li>
    </ul>
<div>

现在选择选项A后，以下列表应显示在同一<div>

中

    <ul>
        <li><a href="#">P</li>
        <li><a href="#">Q</li>
        <li><a href="#">R</li>
    </ul>

并且像这样，它最多可以降低3-4级，例如： - From A->P,Q,R。 From P->D,E,F。 From D->S,R,T和类似的。所有内容都应显示在同一<div>标记内。

我搜索过bootstrap但没有得到预期的结果。这可以在bootstrap中完成。如果没有，我如何在jQuery中解决这个问题？

Answer 1

如果您正在使用jquery查找树视图布局，请尝试以下代码：

$('.tree li').each(function(){
        if($(this).children('ul').length > 0){
                $(this).addClass('parent');     
        }
});

$('.tree li.parent > a').click(function(){
        $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
});

演示和来源：http://www.webstutorial.com/jquery-treeview-list/jquery

在同一<div> </div>中显示所选选项的选项

1 个答案: