Question

我正在使用可折叠的菜单。单击按钮Collapsible Group Item #1时是否可以显示#externalBtn？

    <div class="panel-group" id="panel-219487">
        <div class="panel panel-default">
            <div class="panel-heading">
                 <a class="panel-title" data-toggle="collapse" data-parent="#panel-219487" href="#panel-element-702909">Collapsible Group Item #1</a>
            </div>
            <div id="panel-element-702909" class="panel-collapse collapse in">
                <div class="panel-body">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                 <a class="panel-title" data-toggle="collapse" data-parent="#panel-219487" href="#panel-element-81966">Collapsible Group Item #2</a>
            </div>
            <div id="panel-element-81966" class="panel-collapse collapse">
                <div class="panel-body">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
    </div>

<div class='myBtns' id='externalBtn' onclick='Ty()'><img src='img/profile.png'/></div>

Answer 1

您可以使用以下代码。它工作正常。

 $('#externalBtn').click(function (e) {
    $(".panel-collapse").collapse('hide');
    $('#panel-element-702909').collapse('show')
});

请参阅jsfiddle http://jsfiddle.net/KyleMit/DSGxz/

上的工作示例

Answer 2

替代方法是使用.toggle但是当您再次点击#externalBtn时，这也会撤消操作。

$('#externalBtn').click(function () {
    $(".panel-collapse").toggle();
    $('#panel-element-702909').toggle();
});

可折叠菜单由外部按钮控制

2 个答案: