如何使用 javascript 初始化 bootstrap 4.6 崩溃？

Posted 2023-05-08

【中文标题】如何使用 javascript 初始化 bootstrap 4.6 崩溃？

【英文标题】：How to initialize bootstrap 4.6 collapse with javascript?

【发布时间】：2021-11-05 09:34:25

【问题描述】：

Bootstrap 4.6 docs mention 我们可以使用data- 属性或javascript 启用/初始化折叠菜单。我认为data-target 仍然需要将按钮链接到可折叠元素。这给我留下了data-toggle="collapse"，我认为它进一步等同于javascript initilization。所以让我们尝试一下：

$("#demo").collapse() //doesn't work

$("#demo").collapse(
  toggle: false
) //doesn't work either!!

$("#demo").collapse("toggle"); //doesn't do nothing

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <button id="mybtn" type="button" class="btn btn-primary"  data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

如您所见，我无法仅通过 javascript 初始化折叠功能。所以我的问题是：

如何在没有data-toggle 属性的情况下使用javascript 启用/初始化bootstrap 4.6 崩溃？注意 data-target 仍然是允许的。 在初始化中传递选项对象有什么作用？特别是通过toggle: false 和toggle: true 有什么区别？我可以通过toggle: "collapse"吗？

【问题讨论】：

我相信这可能仍然适用***.com/questions/20121982/…

【参考方案1】：

试试这个

// activates your content as a collapsible element
$('#myCollapsible').collapse();

$('#collapseButton').on('click', function() 
  // toggles a collapsible element to shown or hidden
  $('#myCollapsible').collapse('toggle');
);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" id="collapseButton">Toggle Collapse (Shown On Load)</button>

<div id="myCollapsible">
  <div class="card card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
  </div>
</div>

使用class="collapse" 和toggle: false 使collapse 在加载时隐藏

// activates your content as a collapsible element
$('#myCollapsible').collapse(toggle: false);

$('#collapseButton').on('click', function() 
  // toggles a collapsible element to shown or hidden
  $('#myCollapsible').collapse('toggle');
);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" id="collapseButton">Toggle Collapse (Hidden On Load)</button>

<div class="collapse" id="myCollapsible">
  <div class="card card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
  </div>
</div>

【讨论】：

这不是正确的答案。您正在使用 jquery click 功能手动折叠菜单。一，使用您的方法，您不需要$('#myCollapsible').collapse();，因为没有任何东西被激活。二、当你用$('.carousel').carousel()初始化引导轮播时，你不需要显式使用$('.carousel').carousel('next')，轮播就像用data-属性初始化一样运行。 collapse 也应该如此。

@user31782：那我不明白你的问题。您问，“如何使用 javascript 在没有数据属性的情况下启用/初始化 bootstrap 4.6 崩溃”。我没有使用data- 属性。切换需要触发器吗？如果没有数据属性或 js，你将如何指定要折叠的元素。

我仍然可以使用data-target 指定哪个是触发按钮，data-target 的值将告诉哪些元素需要折叠。我想在不点击 jquery 的情况下激活/启用/初始化折叠菜单。但是，$('#myCollapsible').collapse(); 没有做到这一点，这是我不明白的。

@user31782：查看文档“将您的内容激活为可折叠元素”。它没有设置触发切换事件的父级。我认为您对初始化和切换感到困惑。

触发切换的父级可以通过data-target设置，这不是问题。如果 js 初始化所做的唯一事情是将内容激活为可折叠，那么这是多余的，因为您不需要激活任何东西来使切换起作用。

【参考方案2】：

您需要像这样在按钮上添加一个操作：

setTimeout(function()
  $("#demo").collapse("toggle");
  //console.log("toggle");
, 200);

$('#mybtn').click(function()
    $("#demo").collapse("toggle");
);

另一个对我来说非常有效的解决方案：

<div class="container-fluid">
  <button id="mybtn" type="button" class="btn btn-primary"  data-toggle="collapse" href="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
   $(function()
      $("#demo").collapse("toggle");
   );
</script>

功能的区别和使用在文档中有很好的解释：https://getbootstrap.com/docs/4.6/components/collapse/#via-javascript

【讨论】：

但是，这不是引导崩溃的激活。您只是在点击事件上手动触发toggle。 javascript 初始化应该模仿data-* 初始化，因此不需要手动分配事件。

我修改了答案并添加了一个名为 setTimeout 的 JavaScript 函数，它可以让您触发事件

添加setTimeout 有什么意义？我仍然不明白为什么我们需要 jquery click 来绑定切换，引导激活应该绑定它本身。

删除点击事件这仍然有效，我们需要setTimeout，因为您的页面必须首先完全加载指令$（“#demo”）。折叠（“切换”）；被执行。

如果我删除了点击事件，那么在按下#mybtn 按钮时不会发生任何事情。如果您使用 setimeout 只是为了等待加载页面，那么您最好使用 domcontentloaded 或 jquery ready function 然后强制 css 重绘以使其防弹。