通过事件触发Bootstrap .collapse('toggle')的折叠效果

Question

我有一个表单，横跨几个现成的Bootstrap折叠板。它们在鼠标单击时可以正确地切换 - 现在我想实现一种通过任何事件打开关闭的方式，该事件会在从当前打开的窗格的最后一个输入上跳出选项卡时触发。

也就是说，在我遍历打开面板的输入字段时，我可以从一个输入到下一个输入进行选项卡 - 当我从最后一个输入进行选项卡时，焦点转到下一个窗格的相应标题区域。我希望选项卡到该标题区域的行为会触发.collapse('toggle')；

我尝试了几种变化：

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

我也尝试使用:parent来追溯家族谱，但没有找到关键点。我的面板结构如下：我使用了3个面板，其中唯一的标识符是嵌套在

结构中的一层。基本上与BS的文档差不多。例如一个面板的结构：

    <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]

- justSteve

Answer 1

那么反过来做呢？当当前手风琴中的最后一个输入框失焦时，打开下一个手风琴：

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

当然了，你需要给所有元素都分配一个独特的ID，并且不是全部都是collapseAcct

。

- adeneo

---

我正在使用3个窗格进行工作 - 所有根据OP唯一ID。我想我可以为每个窗格的顶级div添加一个唯一ID。但是我不明白...您片段的左侧选择器如何知道当前活动的窗格是哪个？ - justSteve

Answer 2

我有一个情况，需要让Bootstrap面板像表单一样在焦点或鼠标悬停时打开。

我只需触发单击事件。

代码:

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

- Abs

---

页面加载时，是否可以显示所有元素未折叠？ - Anil Yadav

这个非常完美，即使你有特殊的点击功能。我最初以为我必须重新制作它们或包装它们，但这使得它更容易。 - Salvatore

Answer 3

这应该可以帮助你入门：http://jsfiddle.net/Xbg4n/45/ 这个例子没有使用 .collapse，而是使用了 .slideUp 和 .slideDown… 换成 collapse 应该很容易，但为了示例目的而已。最重要的是定位，我认为这是你主要关心的内容。我还添加了一些内容来循环回第一个容器，但只停留在那里。你应该对焦点进行更好地控制（避免在锚标记上聚焦，并在循环回到第一个容器时强制聚焦）。

你没有提供完整的 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;
}

- Robert Waddell

Answer 4

您可以使用Bootstrap折叠事件

show.bs.collapse

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

shown.bs.collapse   

当折叠元素已对用户可见（将等待 CSS 过渡完成）时，将触发此事件。

hide.bs.collapse

当调用隐藏方法时，此事件将立即触发。

hidden.bs.collapse 

当折叠元素已从用户处隐藏（将等待 CSS 过渡完成）时，将触发此事件。

示例：

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

- Marcelo Austria

---

引用你的来源@Marcelo。https://getbootstrap.com/docs/4.0/components/collapse/ - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ