通过 JavaScript 调用 Bootstrap 手风琴

Question

我想在我的网站上使用手风琴，但我更愿意使用它而不是 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"
    });             
});

更新

好吧，我想出了一个临时解决方案，但我对此并不满意，所以我仍然很感激使用父选项解决此问题背后的机制的答案。现在，我通过检查 class .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 控件确实有两个不同的阶段（有时合并）：

初始化
调用。

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

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

但是，还有其他的问题，比如parent是"dependent on the panel class"。

如果您只是想要一种更简洁的方式来手动处理 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');
});

这是堆栈片段中的演示：

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>

通过 JavaScript 调用 Bootstrap 手风琴

Invoke Bootstrap Accordion via JavaScript

javascript

jquery

accordion

twitter-bootstrap

更新

这是堆栈片段中的演示：