Question

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

我尝试编写的函数不知道为什么它无法在任何地方渲染。现在这只是一个console.log，但是请引导我朝着使之成为可能的正确方向发展。

请查看代码笔以查看HTML与JQuery一起使用。

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();  
});

Answer 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

Answer 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

谢谢大家！

一次只展开一个bootstrap 4崩溃

2 个答案: