点击时隐藏引导手风琴标题答案

【问题标题】：Hide bootstrap Accordion Title on click点击时隐藏引导手风琴标题
【发布时间】：2015-01-16 15:14:07
【问题描述】：

我有两个引导选项卡，每个选项卡上都有一个手风琴。

根据设计，当我单击手风琴标题时，面板应该会像当前一样下拉。但是，手风琴标题需要隐藏。单击正文后，正文应回滚，标题应重新出现。

我现在构建它的方式，如果我点击标题，正文就会正确显示。但是，如果我单击正文，正文会消失，并且标题不会重新显示。我需要标题重新出现并能够重新开始整个过程。

我已经包含了我的标记、jquery 和两个屏幕截图。谢谢

<div class="panel-heading" role="tab" id="headingForensic">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseForensic" aria-expanded="true" aria-controls="collapseOne">
        <h4 class="panel-title">                        
          <img src="img/service_icons/forensic_icon.png"class="accordianImage"> FORENSIC COLLECTION     
        <img src="img/service_icons/arrow_left.png"class="accordianImage pull-right">     
        </h4>
    </a>
</div>
<div id="collapseForensic" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  <div class="panel-body">
    <div class="row">
        <div class="col-md-4">
            <img src="img/service_icons/security_icon_large.png"class="accordianImage">
        </div>
        <div class="col-md-8">
            <a id="#openForensic" data-toggle="collapse" data-parent="#accordion" href="#collapseForensic" aria-expanded="true" aria-controls="collapseOne" ><h3>FORENSIC COLLECTION<img src="img/service_icons/arrow_down.png"class="accordianImage pull-right">   </h3></a>
            <p>Security is as much about the small details as it is the big picture. An employee losing a flash drive with sensitive documents stored on it constitutes as much a breach of security as a theft. How do you best protect against these and other types of security breaches? We can show you. Whether you’re at the beginning of litigation or in the middle of an investigation, we can help you make sure that all your information stays safe.
            </p>
        </div>
    </div>
  </div>
</div>

$( document ).ready(function() {            
    $("#headingForensic").click(function(){
      $("#headingForensic").hide();
    });
    $("#openForensic").click(function(){
      $("#headingForensic").show();
    });
});

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案1】：

这个怎么样？

$( document ).ready(function() {  
    $("#headingForensic").click(function(){
      $('.panel-heading').hide();
    });
    $("#collapseForensic").click(function(){
      $('.panel-heading').show();
    }); 
});

您可以在此处找到更多详细信息：http://getbootstrap.com/javascript/#collapse

希望对你有帮助！

【讨论】：

这会导致标题和正文在标题点击时打开。然后当你折叠 body 时，标题会重新出现。如果你再次点击标题，整个事情就消失了。
对不起！在我的答案中编辑了代码 - 它应该表现得像一个普通的手风琴，除了隐藏内容显示的标题和恢复内容折叠的标题。这就是你要找的东西吗？

【解决方案2】：

您有没有查看过 Bootstraps Accordion 和 Tab 示例。我会将手风琴嵌入标签中。你所要做的就是风格。这是一个示例，单击主页和个人资料选项卡以查看 2 个变体。 http://getbootstrap.com/javascript/#tabs-exampleshttp://getbootstrap.com/javascript/#collapse-example-accordion

【讨论】：

是的，我正在使用它。那不是我的问题。