我有一个类似于它应用的bootstrap手风琴，但是我需要一些其他功能，我需要一些专家帮助。
目前，在查看时，第一个父链接及其子链接将折叠为可见，直到用户选择另一个父链接来折叠其子链接，依此类推。
这很好，但是为了进一步的功能，我希望包含以下内容：
父链接也是页面链接？ - 我希望父链接自己充当页面，而不仅仅是一个href锚点链接，用于折叠向上/向下折叠以使手风琴发挥作用，而且这些父链接也是页面，即account.html，media.html，privacy.html那么有没有办法使用jQuery在第二列 col-md-12 中输入页面，使用像我这样的导航等手风琴标签？我不知道该怎么做，所以对某些代码的任何建议都会有所帮助...
子链接功能 - 子链接将充当父链接页面中的锚链接以指向特定部分，因为它们将包括长格式并提供大量内容以便于导航。
对于父级和子链接状态 - 父链接及其子链接应具有黑色背景，并且文本为白色以表示处于活动状态，而未选择的父链接应具有白色背景，文本应为黑色以使其不活动。当您将鼠标悬停在任何链接上时，它们将为橙色。
我在考虑确保父链接本身就是实际页面，这需要使用jQuery吗？我不确定，除非没有它，否则这将是伟大的。
我需要它具有响应能力并且能够正常工作。我希望我在解释我希望它如何运作方面有意义，如果没有，请向我提问以澄清。
这是一张图片： enter image description here
谢谢大家，你是最伟大的......
我提供了我目前拥有的html和css：
<div class="container">
<div class="row">
<div class="col-md-2 sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Account
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> link</a>
<li><a href=""> link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Link
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> link</a>
<li><a href=""> link</a>
<li><a href=""> link</a>
<li><a href=""> link</a>
<li><a href=""> link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Media
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> Photos</a>
<li><a href=""> Videos</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
Privacy
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="col-md-10">
<div class="row">
<h2>Heading</h2>
<h3>Heading</h3>
<div class="form-inline form-details" role="form" action="/profileDetails" method="post">
<div class="form-group">
</div>
</div>
</div>
</div>
</div>
<!-- end of container -->
.container { background-color: #1f1f1f;}
.row.header{ color: #fff; border-bottom: 6px solid #fff }
.row.header h1 { padding: 30px 0; font-size: 3em; font-weight:100; }
.row.main-content { border-left: 6px solid #aaa;}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.col-md-2.sidebar { padding: 0; }
.panel {border-radius: 0 !important; border: 0; font-family: 'Lato', Arial, sans-serif; font-weight: 400}
.panel-group {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-weight: bold; font-size: 20px}
.panel-heading h4.panel-title a:active {color: #fff }
.panel-heading h4.panel-title a:hover {color: #f47929}
.panel-group .panel+.panel {margin-top: 0px !important; border-top: 1px solid #ccc}
.panel.panel-default.custom .panel-heading { background: #fff; color: #000; border-color: #fff }
.panel-body {//padding-top: 2px !important; //padding-bottom: 0px !important; padding: 0px !important; border: 0 }
.panel-body ul { margin: 0; padding: 0 }
.panel-body ul li { padding: 15px 0 !important; border-bottom: 1px solid #ccc; font-size: 14px}
.panel-body ul li:last-child {border-bottom: 0}
.panel-body ul a.btn-block>a { color: #f47929}
.panel-body ul li a:link { margin-left: 40px !important; color: #4d4d4d}
.panel-body ul li a:active {color: #fff}
.panel-body ul li a:hover {text-decoration: none; color: #f47929 }
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse { border: 0 !important; padding: 0}
.panel-heading.collapsed { background-color: #222222}