隐藏在引导-崩溃不工作

Hide on bootstrap-collapse is not working

本文关键字：崩溃 工作 隐藏      更新时间：2023-09-26

我使用的是bootstrap-collapse.js v2.0.3。我有2查询显示/隐藏手风琴。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>

从任何不想在加载时展开的手风琴组中删除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

试试这样:

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

你应该在id前面加上#来选择那个特定的元素。

我的工作是替换:

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


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

编辑:这只是第一次调用。

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

适用于后续调用。在我的例子中，我只是在函数

中调用两者

只需在每个标签中添加和id link:

 <div class="accordion-heading">
        <a id="link1" 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">
然后调用click事件 
if($('#link1').hasClass('collapsed')){
    $('#link1').click();
}
相关文章：