个人中心
gpt4 book ai didi

javascript Bootstrap Accordion

转载 作者：太空宇宙 更新时间：2023-11-03 17:28:15 25 4
gpt4 key购买 nike

我查看了其他人提出的关于 Accordion 式可折叠面板集的众多问题，但我没能找到一个面板保持独立且不保留各种标题的问题。

我希望在一侧和另一侧有多个按钮，单击按钮时会显示一个面板。我希望一次只显示一个面板。我正在使用 BootStrap CSS 框架(喜欢它)。

如果有人能帮我微调我的代码，我将不胜感激。我不明白我哪里出错了。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid main">
    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
                <li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
                <li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
            </ul>
        </div>
        <div class="col-md-10">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default collapse in" id="overview">
                  <div class="panel-heading">
                    <h3 class="panel-title">Overview</h3>
                  </div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
                <div class="panel panel-default collapse" id="view1">
                  <div class="panel-heading">
                    <h3 class="panel-title">View 1</h3>
                  </div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
                <div class="panel panel-default collapse" id="view2">
                  <div class="panel-heading">
                    <h3 class="panel-title">View 2</h3>
                  </div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
            </div>
    	</div>
    </div>
</div>
</body>
</html>

最佳答案

只需再添加一层面板

<div class="container-fluid main">
    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
                <li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
                <li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
            </ul>
        </div>
        <div class="col-md-10">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel">
                    <div class="panel panel-default collapse in" id="overview">
                        <div class="panel-heading">
                            <h3 class="panel-title">Overview</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel panel-default collapse" id="view1">
                        <div class="panel-heading">
                            <h3 class="panel-title">View 1</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel panel-default collapse" id="view2">
                        <div class="panel-heading">
                            <h3 class="panel-title">View 2</h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如果你想去掉任何额外的填充/边距，你可能需要调整内部内容的类。您唯一需要知道的是，bootstrap 会将任何面板的子项隐藏在数据父项下，除非它们与刚刚单击的数据目标相匹配。

关于javascript Bootstrap Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31095188/

25 4 0
文章推荐： html - 语义 UI CSS 右填充
文章推荐： ruby-on-rails - 可以使用 Ruby 1.8.5 吗？
文章推荐： ruby - 如何在 Ruby 中合并对 Dir#[] 的调用？
文章推荐： css - Firefox CSS 没有动画但 Chrome 有
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com