所以我有一个 Bootstrap 面板，其中嵌套了另一个面板(有点像书籍布局，每个部分都有部分和章节，两层都是可折叠的)。我正在尝试向内部面板(章节名称)提供 href，但如果该部分当前已折叠，则浏览器不会滚动到该点。
<div class="accordian" id="accordion1">
<!-- Multiple such sections -->
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title top-heading" data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
Section 1
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse in subsection">
<!-- Each section has multiple chapters -->
<div class="panel-body">
<div class="panel-group" id="subaccordion1">
<!-- Panel for chapter 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title chapter-name" data-toggle="collapse" data-parent="#subaccordion1" href="#collapse1InnerOne1">
<!-- The above link works when the panels are all expanded but not when they are collapsed. How to get it to work all the time? -->
Chapter 1
</h4>
</div>
<div id="collapse1InnerOne1" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
Chapter 1 content
</ul>
</div>
</div>
</div>
<!-- Panel for chapter 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title chapter-name" data-toggle="collapse" data-parent="#subaccordion1" href="#collapse1InnerOne2">
Chapter 2
</h4>
</div>
<div id="collapse1InnerOne2" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
Chapter 2 content
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Panel for section 2 with chap 2&3 etc -->
#collapse1InnerOne1 链接在面板打开时有效，但在面板折叠时无效。如何让它在这两种情况下都起作用？
谢谢。
最佳答案
这可能会帮助您..检查 Collapsible Group Item #2
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-body">
<h2>Heading</h2>
<div class="panel-group" id="accordion21">
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoOne">View details 2.1 »
</a>
<div id="collapseTwoOne" class="panel-collapse collapse">
<div class="panel-body">Details 1</div>
</div>
</div>
<div class="panel ">
<a data-toggle="collapse" data-parent="#accordion21" href="#collapseTwoTwo">View details 2.2 »
</a>
<div id="collapseTwoTwo" class="panel-collapse collapse">
<div class="panel-body">Details 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item #3.1
</a>
</h4>
</div>
<div id="collapseThreeOne" class="panel-collapse collapse in">
<div class="panel-body">Panel 3.1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2
</a>
</h4>
</div>
<div id="collapseThreeTwo" class="panel-collapse collapse">
<div class="panel-body">Panel 3.2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>关于javascript - Bootstrap 跳转到折叠面板内的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41217552/