1
Я просмотрел многочисленные вопросы, которые другие задавали о сворачиваемом наборе панелей с аккордеонным стилем, но я не смог найти тот, в котором панели остаются отдельными и не сохраняют заголовок рода.javascript bootstrap Accordion
Я ищу несколько кнопок на одной стороне, а с другой - панель, которая будет отображаться при нажатии кнопки. Я хочу, чтобы на панели отображалась только одна панель. Я использую BootStrap CSS Framework (люблю его).
Я был бы очень признателен, если бы кто-то мог помочь мне настроить мой код. Я не понимаю, где я ошибся.
<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">
\t <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>
\t <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>
\t </div>
</div>
</div>
</body>
</html>
Итак, в чем вопрос? Я могу предположить, что это «не работает», но какое поведение вы ожидаете, и что он делает? Если вы можете создать Stack Snippet или JSFiddle, демонстрирующий любой случай, это было бы полезно. –
Отличная идея! Я даже не понял, что могу создать фрагмент стека. Я сделал это, и дизайн правильный. Как я могу показать только одну панель? Это, если я нажму на View 1, панель «Обзор» исчезнет, и появится панель «Вид 1»? Я знаю, что есть некоторые вещи, которые вы можете сделать для стиля аккордеона, но я не уверен, как это помогает мне в этом случае :(Спасибо Tieson! – Munzo