Javascript 我的手风琴不能按我的要求正常工作
我有一个引导式手风琴，它的工作原理和它应该的一样，但是我需要一些进一步的功能，我需要一些专家的帮助 当前查看时，第一个父链接及其子链接折叠为可见，直到用户选择另一个父链接折叠其子链接，依此类推 这很好，但对于进一步的功能，我希望包括以下内容： 父链接也是页面链接？ -我希望父链接本身充当页面，而不仅仅是a href锚链接向上/向下折叠以使手风琴正常工作，而且这些父链接也是页面，即account.html、media.html、privacy.html，等等。那么有没有一种方法可以使用jQuery在第二列中输入页面col-md-12，使用类似于我的手风琴选项卡导航？我不知道如何去做这件事，所以任何建议与一些代码将有助于 子链接功能 -子链接将充当父链接页面中指向特定部分的锚定链接，因为它们将包含长表单，并提供大量内容以便于导航 用于父链接和子链接状态 -父链接及其子链接应具有黑色背景，文本应为白色以表示处于活动状态，而未选择的父链接应具有白色背景，文本应为黑色以表示未处于活动状态。当您将鼠标悬停在任何链接上时，它们将是橙色的 我想确保父链接本身就是实际的页面，这需要使用jQuery吗？我不确定，除非没有它也能做到，否则那就太好了 我需要它的反应和正常工作。我希望我在解释我希望它如何工作时有意义，如果没有，请问我一些问题来澄清 这里还有一张图片： 谢谢大家，你们是最伟大的 我已经提供了我目前拥有的html和css：Javascript 我的手风琴不能按我的要求正常工作,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我有一个引导式手风琴，它的工作原理和它应该的一样，但是我需要一些进一步的功能，我需要一些专家的帮助 当前查看时，第一个父链接及其子链接折叠为可见，直到用户选择另一个父链接折叠其子链接，依此类推 这很好，但对于进一步的功能，我希望包括以下内容： 父链接也是页面链接？ -我希望父链接本身充当页面，而不仅仅是a href锚链接向上/向下折叠以使手风琴正常工作，而且这些父链接也是页面，即account.html、media.html、privacy.html，等等。那么有没有一种方法可以使用jQuery
<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}
-
-
-
-
-
-
-
-
-
标题
标题
.container{背景色：#1f；}
.row.header{color:#fff；边框底部：6px solid#fff}
.row.header h1{填充：30px 0；字体大小：3em；字体重量：100；}
.row.main-content{左边框：6px实心#aaa；}
/********导航侧栏********
**********************************
*/
.col-md-2.sidebar{padding:0；}
.panel{边框半径：0！重要；边框：0；字体系列：'Lato'，Arial，无衬线；字体重量：400}
.panel组{边框半径：0；//框阴影：1px 1px 3px#074f68；边框：0；背景色：#fff}
.panel标题h4.panel-title{边框半径：0；//方框阴影：1px 1px 3px 35; 074f68；边框：0；背景色：#fff；}
.panel heading h4.panel-title a:链接{左边距：10px；文本装饰：无；字体大小：粗体；字体大小：20px}
.panel标题h4.panel-title a:活动{color:#fff}
.面板标题h4.面板标题a:悬停{颜色：#f47929}
.panel group.panel+.panel{margin top:0px！重要；border top:1px solid#ccc}
.panel.panel-default.custom.panel标题{背景：#fff；颜色：#000；边框颜色：#fff}
.panel body{//填充顶部：2px！重要；//填充底部：0px！重要；填充：0px！重要；边框：0}
.panel body ul{边距：0；填充：0}
.面板主体ul li{填充：15px 0！重要；边框底部：1px实心#ccc；字体大小：14px}
.panel body ul li:最后一个子项{边框底部：0}
.panel body ul a.btn-block>a{color:#f47929}
.panel body ul li a:link{margin left:40px！重要；颜色：#4d}
.面板主体ul li a:活动{颜色：#fff}
.面板主体ul li a:悬停{文本装饰：无；颜色：#f47929}
#崩塌，面板崩塌，
#塌陷中间板-塌陷，
#collapseThree.panel-collapse{border:0！重要；填充：0}
.panel-heading.collapsed{背景色：#22222}