使用 URL 打开 Bootstrap 4 手风琴 [英] Opening Bootstrap 4 accordions using URL

查看：34
本文介绍了使用 URL 打开 Bootstrap 4 手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果我要使用这个手风琴示例(粘贴在下面) - https://getbootstrap.com/docs/4.0/components/collapse/并将它放在一个名为 test-bootstrap.html 的文件中，我将如何格式化 URL 以打开手风琴?如果我能得到我需要的结果，我很乐意修改 HTML 文件.

我很高兴在 Stack Overflow 上有这个问题的答案，但这些是指旧版本的 Bootstrap 或涉及点击链接.

我使用的 CMS 可以构造类似这些的 URL -

file:///C:/Users/dvb/Desktop/test-bootstrap.html#collapseOne 或

file:///C:/Users/dvb/Desktop/test-bootstrap.html#1

 <头>[添加了适当的库]<身体><div id="手风琴"><div class="card"><div class="card-header" id="headingOne"><h5 class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">可折叠组项目 #1

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.

<div class="card"><div class="card-header" id="headingTwo"><h5 class="mb-0"><button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">可折叠组项目 #2

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.

<div class="card"><div class="card-header" id="headingThree"><h5 class="mb-0"><button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">可折叠组项目 #3

<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.

解决方案

这是一个非常基本的示例.

如果您将 ?collapseExample 附加到您的 URL，其中 collapseExample 是您要显示的折叠 div 的 ID，然后在 HTML 代码之后添加 Javascript，它将 show 类添加到 div 加载中.

如果您想将附加的字符串分解为变量和值，您可以整理 Javascript.

if (window.location.search == '?collapseExample') {$('#collapseExample').addClass('show');}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWSnjCross"="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5storigt;"/脚本><p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">与 href 链接</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">带有数据目标的按钮</p><div class="collapse" id="collapseExample"><div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.

If I was to use this accordion example (pasted below) - https://getbootstrap.com/docs/4.0/components/collapse/ and place it in a file named test-bootstrap.html how would I format a URL to open the accordion? I am happy to modify the HTML file if I can get the results I need.

I appreciate that there are answers to this question on Stack Overflow but these refer to older versions of Bootstrap or involves clicking on links.

The CMS I am using can construct a URL similar to these -

file:///C:/Users/dvb/Desktop/test-bootstrap.html#collapseOne or

file:///C:/Users/dvb/Desktop/test-bootstrap.html#1

 <html>
    <head>
      [appropriate libraries added]
    </head>
    <body>
        <div id="accordion">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                        </button>
                    </h5>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                        </button>
                    </h5>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Collapsible Group Item #3
                        </button>
                    </h5>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

解决方案

This is a really basic example.

If you append ?collapseExample to your URL where collapseExample is the ID of the collapse div you want to show, and then add the Javascript AFTER the HTML code, it will add the show class to the div onload.

You can tidy up the Javascript if you want to break the appended strings down into variables and values.

if (window.location.search == '?collapseExample') {
  $('#collapseExample').addClass('show');
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

这篇关于使用 URL 打开 Bootstrap 4 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆