一次只展开一个引导程序 4 折叠答案

【问题标题】：Only expand one bootstrap 4 collapse at a time一次只展开一个引导程序 4 折叠
【发布时间】：2019-01-27 00:54:22
【问题描述】：

我有这个 HTML，它将有多个 Bootstrap 4 折叠卡。我需要它一次只打开一个，如果打开另一个，所有兄弟卡片都必须隐藏。请看我的codepen。

我正在尝试编写的函数我不确定为什么它没有在任何地方呈现。现在它只是一个console.log，但请引导我朝着正确的方向前进。

请查看 codepen 以查看使用 JQuery 的 HTML。

function expandOneOnly() {
 if ($(".panel").find(".collapse").hasClass("show")) {
     console.log("hi");
 }

function enableNotification() {
$('.notify-check').change(function() {
    $(this).closest('.panel').find(".caret-icon").toggleClass("hide");
    $(this).closest('.panel').find(".disabled-overlay").toggleClass("hide");
    $(this).closest('.panel').find(".select-text-display").toggleClass("hide");
    if ($(this).closest('.panel').find(".collapse").hasClass("show")) {
        $(this).closest('.panel').find(".collapse").toggleClass("show");
        $(this).closest('.panel').find(".caret-icon").toggleClass('fa-caret-up fa-caret-down');
    }
     expandOneOnly();
});
}

$(document).ready(function() {
overlayWidth();
enableNotification();
expandSelection();
frequencySelection();  
});

【问题讨论】：

第一个 if 语句缺少括号。

标签： jquery html bootstrap-4 collapse

【解决方案1】：

我认为您可以简化这一点，以便处理程序只有：

function enableNotification() {
    $('.notify-check').change(function() {
        var panel = $(this).closest('.panel')
        $(this).closest('.row').children().removeClass('active')
        panel.addClass('active')
     });
}

然后你的 CSS 中有这个：

.active .disabled-overlay {
  display: none;
}

.active .caret-icon,
.active .select-text-display,
.active .collapse {
  display: inherit;
}

这样您只处理当前项目并添加active 类，而对于所有其他项目，您只需删除该类。 CSS 负责其余的工作。

Here is this working

【讨论】：

您可以将.not() 函数更改为：$(this).closest('.row').children().removeClass('active'); panel.addClass('active') :)
更好！谢谢:)
@ChrisHappy 很抱歉这些解决方案不起作用。我还查看了“这是这个工作”的代码笔，它有问题。当开关打开时，叠加层必须消失，点击价格标题时应该显示展开。如果开关关闭，则展开需要折叠。如果您点击另一个价格标题，第一个价格上的展开应该会折叠，但叠加层不能重新出现。

【解决方案2】：

下面的答案效果很好。

function expandSelection() {
$(".btn-title").click(function() {
    $(this).find(".caret-icon").toggleClass("fa-caret-up fa-caret-down");
    if ($(this).closest(".panel").siblings().find(".collapse").hasClass("show")) {
        $(this).closest(".panel").siblings().find(".collapse").removeClass("show");
        $(this).closest(".panel").siblings().find(".caret-icon").toggleClass("fa-caret-up fa-caret-down");
    }
});
}

查看更新的 Codepen 以获取完整的 HTML、CSS、JQuery 代码：https://codepen.io/sazad/pen/XPWXYR

谢谢大家！

【讨论】：