首页 / 技术问答 / Javascript问答列表 / 问答详情

使用JavaScript而不使用jQuery来操作Bootstrap折叠面板的方法

我有一个面板内的Bootstrap手风琴字段.我需要我的按钮来切换手风琴的展开和折叠.使用Click()不起作用.

  1. 如何用纯香草JS操控手风琴展开和折叠？
  2. 如何在页面加载时设置手风琴的默认状态？

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button
      type="button"
      class="btn btn-info"
      onclick="
      alert('Hello');
      document.getElementById('sample-module').click();
    "
    >
      Toggle Accordian
    </button>
    <br /><br />
    <div class="row">
      <div class="col-xs-12">
        <div class="panel-group accordion">
          <div id="sample-module" class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a
                  class="accordion-toggle"
                  data-toggle="collapse"
                  href="#sample"
                  aria-expanded="false"
                >
                  <i class="glyphicon glyphicon-chevron-down"></i>
                  <strong>Sample Accordian</strong></a
                >
              </h4>
            </div>
            <div
              id="sample"
              class="panel-collapse collapse in"
              aria-expanded="false"
              style=""
            >
              <div class="panel-body">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="form-group">
                      <label class="control-label" for="sample-field-1">
                        Sample Field 1:
                      </label>
                      <div class="controls">
                        <input
                          id="sample-field-1"
                          class="form-control"
                          name="sample-field-1"
                          type="text"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="form-group">
                      <label class="control-label" for="sample-field-2">
                        Sample Field 2:
                      </label>
                      <div class="controls">
                        <input
                          id="sample-field-2"
                          class="form-control"
                          name="sample-field-2"
                          type="text"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

推荐答案

遗憾的是，如果没有jQuery，您就不能使用Bootstrap 3或Bootstrap 4，有趣的是，它是this was a problem for many years.值得庆幸的是，Bootstrap 5不再需要jQuery，因此在您的例子中，既然您不想使用jQuery，那么您将需要使用Bootstrap 5.

事实上，我不太确定你为什么还在使用Bootstrap 3.这是一个过时的版本，不再支持了，所以呢？升级到Bootstrap 4，最好是Bootstrap 5.

有关Bootstrap版本支持的详细信息，请参阅Bootstrap Release Working Group.

此外，我不确定onclick="alert('Hello');document.getElementById('sample-module').click();"是否可以工作，实际上，这就是众所周知的Unobtrusive JavaScript.这不是一个好方法，你应该在<button>上分配一个id，并通过addEventListener()方法来管理点击，如下所示:

const click = document.getElementById("click");
click.addEventListener("click", function () {
    alert("Yay! Clicked!");
});
<button id="click">Click!</button>

根据documentation of Bootstrap 3，您需要使用.collapse()方法，而不是.click()方法(除非我错过了旧Bootstrap版本的某些内容):

$('.collapse').collapse();

因此，您的最终代码将是:

const click = document.getElementById("click");
click.addEventListener("click", function () {
    $('#sample-module').collapse('toggle');
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <button type="button" id="click" class="btn btn-info">
            Toggle Accordion
        </button>
        <br />
        <br />
        <div class="row">
            <div class="col-xs-12">
                <div class="panel-group accordion">
                    <div id="sample-module" class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" href="#sample" aria-expanded="false">
                                    <i class="glyphicon glyphicon-chevron-down"></i>
                                    <strong>Sample Accordian</strong>
                                </a>
                            </h4>
                        </div>
                        <div id="sample" class="panel-collapse collapse in" aria-expanded="false" style="">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label" for="sample-field-1">
                                                Sample Field 1:
                                            </label>
                                            <div class="controls">
                                                <input id="sample-field-1" class="form-control" name="sample-field-1" type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <label class="control-label" for="sample-field-2">
                                                Sample Field 2:
                                            </label>
                                            <div class="controls">
                                                <input id="sample-field-2" class="form-control" name="sample-field-2" type="text" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

并将手风琴的默认状态更改为collapse in至collapse.因此，根据您的代码，您将更改:

<div id="sample" class="panel-collapse collapse in" aria-expanded="false" style="">

致:

<div id="sample" class="panel-collapse collapse" aria-expanded="false" style="">

其中.collapse隐藏内容，.collapse.in显示内容.

还有一个名为.collapsing的类，它是在转换期间应用的.

Javascript相关问答推荐

如何制作删除按钮以从列表中删除该项目所属的项目？

为什么子组件没有在reaction中渲染？

如何使用Paged.js仅渲染特定页面

Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮？

TypScript界面中的Infer React子props

无法访问Vue 3深度监视器中对象数组的特定对象值'

如何解决useState错误—setSelect Image不是函数''

Javascript json定制

编剧如何获得一个div内的所有链接，然后判断每个链接是否都会得到200？

单个HTML中的多个HTML文件

确保函数签名中的类型安全：匹配值

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

为什么客户端没有收到来自服务器的响应消息？

在表单集中保存更改时删除'；禁用'；

react -原生向量-图标笔划宽度

如何在独立的Angular 应用程序中添加Lucide-Angel？

如果我的列有条件，我如何呈现图标？

无法在Adyen自定义卡安全字段创建中使用自定义占位符

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630