Question

我正在为我的应用程序使用JQuery可折叠菜单。我在应用程序中使用了4个可折叠区域。在这里，我仅显示一个部分。如何使该示例出现在我的应用程序的4个区域中？我该怎么做才能在多个区域更改代码？

如何更改此区域以使多个可折叠区域成为可能？

下面是多个可折叠项（两个部分）

 <div class="panel-group driving-license-settings" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox">
                <label data-target="#collapseOne">
                    <input type="checkbox"/> Header 01 
                </label>
            </div>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                    Content 1

                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel-group driving-license-settings" id="accordion2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> </h4>
            <div class="checkbox" id="testCheckBox2">
                <label data-target="#collapseTwo">
                    <input type="checkbox"/> Header 02
                </label>
            </div>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="driving-license-kind">
                     Content 2
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果我的问题正确，那么您可以使用.parents()和.find()组合来选择输入附近的可折叠元素，请注意，我为{{1 }}和panels ，这是一个有效的代码段：

<input>

$('.collapse').collapse();

$("[type='checkbox']").bind('click dblclick', function(evt) {
    if ($(this).is(":checked")) {
        $(this).parents('.panel-group').find('.collapse').slideDown('fast');
    } else {
        $(this).parents('.panel-group').find('.collapse').slideUp('fast');
    }
})

Answer 2

据我所知，您需要在4个不同的页面上或同一页面的4个不同位置显示此可折叠菜单。

如果是这样，则可以以非常简单的方式进行操作。您可以做的是，可以将4个不同的ID或类分配给所有4个不同的菜单，并且在同一jquery代码中，可以使用“命令”通过“ $”选择器选择类和ID。

例如 $（'。collapse，.collapse2，.collapse3，.collapse4'）。collapse（）;

    $("#testCheckBox :checkbox, #testCheckBox2 :checkbox").bind('click 
       dblclick', function(evt) {
        console.log(evt.type);
        if ($(this).is(":checked")) {
            $('.collapse').slideDown('fast');
        } else {
            $('.collapse').slideUp('fast');
        }
    })

但是由于您的问题没有得到充分阐述，因此我无法为您提供确切的解决方案。

jQuery可折叠菜单问题

2 个答案: