通过事件触发 Bootstrap .collapse('toggle')

Posted 2023-03-24

【中文标题】通过事件触发 Bootstrap .collapse(\'toggle\')

【英文标题】：Trigger a Bootstrap .collapse('toggle') via an event通过事件触发 Bootstrap .collapse('toggle')

【发布时间】：2013-06-12 04:35:20

【问题描述】：

我有一个跨多个开箱即用 Bootstrap Collapse 窗格的表单。它们在鼠标单击时正确切换 - 现在我想实现一种方法，通过从当前打开的窗格的最后一个输入中切换时触发的任何事件来打开关闭的窗格。

IOW，当我逐步通过打开窗格的输入字段时，我可以从一个输入切换到下一个输入 - 当我从最后一个输入切换时，焦点转到下一个窗格的后续标题区域。我希望在该标题区域触发.collapse('toggle')；

我尝试了以下几种变化：

    $('#collapseAcct').focus(function () 
        $('#collapseAcct').collapse('toggle');
    );

并且还尝试使用:parent 攀爬家谱，但还没有找到钥匙。 我的窗格结构：我正在使用 3 个窗格，其中唯一标识符是嵌套在 div 结构深处的一层 - 与 BS 的文档几乎相同。例如。 1 个窗格的结构：

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a>            
        </div>
        <div id="collapseAcct" class="accordion-body collapse">
            <div class="accordion-inner">
            <div>content</div>[and everything wraps out accordingly]

【参考方案1】：

反之如何，当当前手风琴的最后一个输入模糊时打开下一个手风琴：

$('.accordion-inner input:last').on('blur', function() 
    $('#collapseAcct').collapse('show');
);

当然，您确实给了所有元素唯一的 ID，而不是所有的 collapseAcct

【讨论】：

我正在使用 3 个窗格 - 根据 OP，所有的 ID 都是唯一的。我想我可以为每个窗格的*** div 添加一个唯一 ID。但是我没有关注...您的 sn-p 的左侧选择器如何知道哪个是当前活动的窗格？

【参考方案2】：

我遇到过一种情况，需要使引导面板的行为类似于在焦点或鼠标悬停时打开的表单。

我刚刚触发了点击事件。

代码：

$('.panel-title a').bind('mouseover focus',function()
$(this).trigger('click');
);

【讨论】：

页面加载显示为不折叠所有元素怎么办。

即使您有特殊的点击功能，它也能完美运行。我最初认为我必须复制它们或包装它们，但这使它更容易。

【参考方案3】：

这应该可以帮助您入门：http://jsfiddle.net/Xbg4n/45/

该示例不使用 .collapse，而仅使用 .slideUp 和 .slideDown... 应该很容易用折叠替换掉，但可以用于示例目的。您真正从中得到的是目标，我认为这是您主要要问的。我还在其中添加了一些内容以循环回到第一个容器，但停在那里。您应该更好地控制焦点（避免关注锚标记并在循环回到第一个容器时强制焦点）。

你没有提供完整的 html 示例代码，所以我填空了：

<form id="myform">
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Account</a> 
    </div>
    <div id="collapseAcct1" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input1" />
                <input type="text" name="input11" />
                <input type="text" name="input12" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Settings</a> 
    </div>
    <div id="collapseAcct3" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input3" />
                <input type="text" name="input31" />
                <input type="text" name="input32" />
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#createUserPanes" href="#collapseAcct">Prefs</a> 
    </div>
    <div id="collapseAcct2" class="accordion-body collapse">
        <div class="accordion-inner">
            <div>
                <input type="text" name="input2" />
                <input type="text" name="input21" />
                <input type="text" name="input22" />
            </div>
        </div>
    </div>
</div>

JS：

$('.accordion-group').each(function()
var topcontainer = $(this);
topcontainer.find('input:last').each(function()
    $(this).blur(function()
        //swap slideup and slidedown for 'collapse' as appropriate
        var nextag = topcontainer.next('.accordion-group');
        var lastag = $('.accordion-group').last();
        if(topcontainer.is(lastag))
            var nextag = $('.accordion-group').first();
        
        var showag = nextag.find('.collapse');
        var hideag = topcontainer.find('.collapse');
        showag.slideDown();
        hideag.slideUp();
    );
);

);

CSS：

#collapseAcct2 
    display:none;

#collapseAcct3 
    display:none;

【参考方案4】：

您可以使用bootstrap collapse events

show.bs.collapse

该事件在调用 show 实例方法时立即触发。

shown.bs.collapse   

当折叠元素对用户可见时触发此事件（将等待 CSS 转换完成）​​。

hide.bs.collapse

当调用 hide 方法时立即触发此事件。

hidden.bs.collapse 

当折叠元素对用户隐藏时触发此事件（将等待 CSS 转换完成）​​。 复制

示例：

$('#myCollapsible').on('hidden.bs.collapse', function () 
  // do something…
)

【讨论】：

引用您的来源@Marcelo。 getbootstrap.com/docs/4.0/components/collapse