javascript - 通过 JavaScript 调用 Bootstrap Accordion

Question

我想在我的网站上使用 Accordion ，但我更愿意使用它而不是 javascript 插件而不是 html 标记。我想要两个按钮来打开不同的内容，但是一次只显示一个。阅读文档后，我认为如果它们具有相同的父选择器，它就可以工作。谁能看看这个 fiddle 并告诉我从这里我该去哪里？

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 类”。

如果您只是想要一种更简洁的方式来手动处理 javascript 中的切换，您可以执行以下操作。

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

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

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');
});

这是堆栈片段中的演示:

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');
});

<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>