Question

我正在使用bootstrap-collapse.js v2.0.3。我有2个关于show / hidden accordian的查询。 1.需要折叠默认扩展的第一个手风琴体。为了展示第一个手风琴，我打电话给$('#Head_1').collapse ('show');，但它没有用。 2.点击div#Head_2需要展开展开的内容，然后展开Head_2。为此，我打电话给

$('#Head_1').collapse ('hide');
$('#Head_2').collapse ('show');

在这种情况下Head_2展开，但Head_1没有崩溃。

<div id="AccordianViewList" class="accordion" >
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
    </div>
    <div class="accordion-body collapse in" id="Body1">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item1</li>
                <li class="listItem" >item2</li>
                <li class="listItem" >item3/li>
            </ul>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList"  href="#Head_2">Head_2</a>
    </div>
    <div class="accordion-body in collapse" id="Head_2">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item4</li>
                <li class="listItem" >item5</li>
                <li class="listItem" >item6</li>
            </ul>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_3">Head_3</a>
    </div>
    <div class="accordion-body in collapse" style="height: auto;"  id="Head_3">
        <div class="accordion-inner">
            <ul class="unstyled" >
                <li class="listItem inFocus" >item7</li>
                <li class="listItem" >item8</li>
                <li class="listItem" >item9</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

尝试这样的事情：

$('#Head_1').collapse('hide');
$('#Head_2').collapse('show');

您应该在#前加上id以选择该特定元素。

Answer 2

我的工作一直是取代：

$('#Selector').collapse('hide');

与

$('#Selector').addClass('collapse');

编辑：这只是第一次打电话。

$('#Selector').collapse('hide');

适用于后续调用。在我的情况下，我只是在我的函数中调用两个

Answer 3

从您不希望在加载时展开的任何手风琴组中删除in类。

因此，举例来说，如果您只想打开#Head_1群组，请按照以下方式修改代码：

...
<div class="accordion-body collapse in" id="Head_1">
...
<div class="accordion-body collapse" id="Head_2">
...
<div class="accordion-body collapse" id="Head_3">
...

您的第一组ID也不匹配。您在一个区域使用Body1，在另一个区域使用Head_1。改变一个，使它们匹配。

<div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
</div>
<div class="accordion-body collapse in" id="Head_1">

实例：http://www.bootply.com/9SYyp5NiLH

Answer 4

只需在每个标签链接中添加ID和ID：

devices: [1,4]

然后调用点击事件

console.log()

在bootstrap-collapse上隐藏不起作用

4 个答案: