Question

我试图通过点击按钮来切换所有手风琴项目的状态。默认情况下，我希望它们全部关闭。该按钮应为string.Split()或string fullpath = @"D:\STACK\SalesNo6\Date20170101\Fileno16.txt"; string sales = fullpath.Split('\\')[2]; string date = fullpath.Split('\\')[3];。

根据docs，我应该可以使用Open All方法吗？

我已将下面的当前代码包含在小提琴链接中。

HTML

Close All

JQuery的

toggle()

Fiddle

感谢任何帮助。

Answer 1

这不是您的代码的确切答案，而是解决方案的一般概念，它对我来说适用于Bootstrap 4上的手风琴。

构建了手风琴，因此一次只能显示一个面板，因此窍门是通过首先在show上删除data-parent属性并在hide上重新添加它来覆盖此行为。

在这种情况下，我有两个按钮。一种用于展示，一种用于隐藏。

 $(function() {
    $('#toggleAccordions-show').on('click', function(e) {
        $('#accordion .collapse').removeAttr("data-parent");
        $('#accordion .collapse').collapse('show');
    })
    $('#toggleAccordions-hide').on('click', function(e) {
        $('#accordion .collapse').attr("data-parent","#accordion");
        $('#accordion .collapse').collapse('hide');
    })
});

Answer 2

您可以尝试以下代码：

  $(function() {
  $('#toggleAccordions').on('click', function(e) {
    $('#accordion .collapse').toggleClass('show');
  })
});

Answer 3

基于Turbojohan的响应，它可以写得短一些，这样您就不会有重复的jQuery选择器：

$(function() {
    $('#toggleAccordionShow').on('click', function(e) {
        $('#accordion .collapse').removeAttr("data-parent").collapse('show');
    });
    $('#toggleAccordionHide').on('click', function(e) {
        $('#accordion .collapse').attr("data-parent","#accordion").collapse('hide');
    });
});

Answer 4

仅使用一个按钮即可显示和隐藏卡，从而可以改善Turbojohan和user315400的答案：

$("#toggleAccordion").click(function(){
  if ($(this).data("closedAll")) {
    $('#accordion .collapse').removeAttr("data-parent").collapse('show');
  }
  else {
    $('#accordion .collapse').attr("data-parent","#accordion").collapse('hide');
  }

  // save last state
  $(this).data("closedAll", !$(this).data("closedAll")); 
});

// init with all closed
$("#toggleAccordion").data("closedAll", true);

Bootstrap 4手风琴切换全部

4 个答案: