html bootstrap 3如果不是数据父代则折叠div

neskvpey  于 2022-12-02  发布在  Bootstrap
关注(0)|答案(1)|浏览(157)

单击另一个折叠时放弃关闭所有折叠。
我有几个由php/mysql生成的折叠组作为多级菜单运行。
基本上它工作得很好,除了一个小问题。当我单击另一个组中的父元素时,我希望所有其他父元素都关闭。
我的跑步菜单的完整HTML副本可以在这里看到:jsFiddle

HTML格式:

<div class="panel panel-default">
    <div class="panel-heading">Categories</div>
    <div id="menu" class="panel-body">
        <div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
            </li>
            <div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                <div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17">CDROM Drives</a><a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                    </li>
                    <div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                        <div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
                            <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17_22">Testcat</a><a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                            </li>
                            <div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                                <div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
                                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_17_22_23">Testcat2</a>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_4">Graphics Cards</a>
                    </li>
                </div>
                <div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_8">Keyboards</a>
                    </li>
                </div>
                <div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_16">Memory</a>
                    </li>
                </div>
                <div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_9">Mice</a>
                    </li>
                </div>
                <div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_6">Monitors</a>
                    </li>
                </div>
                <div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_5">Printers</a>
                    </li>
                </div>
                <div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_7">Speakers</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-info"><a href="index.php?cPath=2">Software</a><a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
            </li>
            <div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
                <div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_19">Action</a>
                    </li>
                </div>
                <div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_18">Simulation</a>
                    </li>
                </div>
                <div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_20">Strategy</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-info"><a href="index.php?cPath=3">DVD Movies</a><a href="#cpath_3" data-toggle="collapse" data-parent="#cpath_3"><span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span></a>
            </li>
            <div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
                <div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_10">Action</a>
                    </li>
                </div>
                <div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_13">Cartoons</a>
                    </li>
                </div>
                <div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_12">Comedy</a>
                    </li>
                </div>
                <div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_15">Drama</a>
                    </li>
                </div>
                <div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_11">Science Fiction</a>
                    </li>
                </div>
                <div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_14">Thriller</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=21">Gadgets</a>
            </li>
        </div>
    </div>
</div>

JS:

//if click chevron's
$('.toggleMe').click(function(){

var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open

});

在第一次载入时看到所有父项。2当点击硬件时,菜单展开。3但是现在当决定点击软件时,硬件保持打开状态。

yjghlzjz

yjghlzjz1#

首先,其他面板的折叠依赖于DOM结构。每个面板都应该被 Package 在一个类为'. panel'的div中。你可以参考issue了解更多细节。
其次,data-parent属性应该引用 Package 所有面板的元素,您只希望打开其中一个面板。

<div id="menu" class="panel-body">    
<div parentid="cPath_1" class="list-group panel" style="margin-bottom: -2px;">
                <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#menu"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                </li>
                <div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                    <div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
                        <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17">CDROM Drives</a><a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                        </li>
                    </div>
                </div>
    </div>
</div>

下面是修改后的代码http://jsfiddle.net/zbrhu/1/

相关问题