通过JavaScript调用Bootstrap Accordion

Question

我想在我的网站上使用手风琴，但是我更喜欢在javascript插件而不是html标记上使用它。我想有两个按钮打开不同的内容，但一次只能看到一个。在阅读完文档之后，我认为如果它们具有相同的父选择器，它将起作用。谁能看看这个小提琴，告诉我从哪里开始？

http://jsfiddle.net/krasnoludojad/q7962oxp/

HTML

<div class="container-fluid" id="accordion">
    <div class="navbar-header">
        <button type="button" class="btn btn-default" id="btn-collapse-menu">MENU</button>
        <button type="button" class="btn btn-default" id="btn-collapse-login">LOGIN</button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-menu">
        <nav>
            <ul class="list-unstyled text-center">
                <li><h3 href="#">BLOG</h3></li>                
            </ul>
        </nav>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-login">
        <p>Lorem ipsum.</p>
    </div>
</div>

JS

$('#btn-collapse-menu').on('click', function(){     
    $('#navbar-collapse-menu').collapse('toggle', {
        parent: "#accordion"
    });             
});
$('#btn-collapse-login').on('click', function(){        
    $('#navbar-collapse-login').collapse('toggle', {
        parent: "#accordion"
    });             
});

更新

我已经提出了一个临时解决方案，我并不高兴所以我仍然会感谢使用父选项解决问题的机制。现在我通过检查是否存在显示字段时出现的类.in来修补javascript

$('#btn-collapse-menu').on('click', function(){     
    $('#navbar-collapse-login').hasClass('in') ? $('#navbar-collapse-login').collapse('hide') : null;
    $('#navbar-collapse-menu').collapse('toggle');
});
$('#btn-collapse-login').on('click', function(){
    $('#navbar-collapse-menu').hasClass('in') ? $('#navbar-collapse-menu').collapse('hide') : null;
    $('#navbar-collapse-login').collapse('toggle');             
});

Answer 1

其中一个问题是，实际上还没有一种方法允许您同时切换和指定崩溃选项，所以这不存在：

$('#navbar-collapse-menu').collapse('toggle', {
    parent: "#accordion"
});   

Bootstrap控件确实有两个不同的阶段（有时会合并）：

1. 初始化
2. 调用。

选项在初始化期间设置，因此您的代码必须如下所示：

$('#navbar-collapse-menu').collapse({
    parent: "#accordion"
});  
$('#navbar-collapse-menu').collapse('toggle');  

然而，还有其他一些问题，例如父母依赖于panel类＆＃34;。

如果您只是想在javascript中手动处理切换的更简洁方法，则可以执行以下操作。

删除元素上的数据属性的问题在于它们确实提供了一种干净的方法来决定每个按钮映射到的可折叠元素。要在javascript中创建，您应该有一个存储所有映射的对象，然后您可以使用单个javascript函数调用整个手风琴。

在第一次加载页面时，创建映射并初始化折叠对象。由于我们还不希望它们展开，因此请添加toggle:false选项以防止立即打开。单击手风琴中的任何按钮时，获取所有可能的可折叠元素。隐藏任何不是事件发起者的元素，并切换引发事件的按钮的目标。

var mapping =  { 
  'btn-collapse-menu': '#navbar-collapse-menu' ,
  'btn-collapse-login': '#navbar-collapse-login' 
};

var $panels = $('#accordion .navbar-collapse').collapse({toggle: false});

$('#accordion .navbar-header button').click(function(){
  var target = mapping[this.id];
  $panels.not(target).collapse('hide');
  $panels.filter(target).collapse('toggle');
});

这是一个堆栈摘要中的演示：

＆＃13;
＆＃13;
var mapping =  { 
  'btn-collapse-menu': '#navbar-collapse-menu' ,
  'btn-collapse-login': '#navbar-collapse-login' 
};

var $panels = $('#accordion .navbar-collapse').collapse({toggle: false});

$('#accordion .navbar-header button').click(function(){
  var target = mapping[this.id];
  $panels.not(target).collapse('hide');
  $panels.filter(target).collapse('toggle');
});
＆＃13;
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.js"></script>


<div class="container-fluid panel" id="accordion">
  <div class="navbar-header">
    <button type="button" class="btn btn-default" 
            id="btn-collapse-menu">
      MENU
    </button>
    <button type="button" class="btn btn-default" 
            id="btn-collapse-login">
      LOGIN
    </button>
  </div>
  
  <div class="collapse navbar-collapse" id="navbar-collapse-menu">
    <nav>
      <ul class="list-unstyled text-center">
        <li><h3 href="#">Blog Content</h3></li>                
      </ul>
    </nav>
  </div>
  
  <div class="collapse navbar-collapse" id="navbar-collapse-login">
    <p>Login Content</p>
  </div>
  
</div>
＆＃13;
＆＃13;
＆＃13;