从单独的菜单引导控制手风琴答案

【问题标题】：Bootstrap control accordion from seperate menu从单独的菜单引导控制手风琴
【发布时间】：2014-10-16 10:52:34
【问题描述】：

我有一套 4 个引导手风琴，我在导航中使用下拉菜单打开手风琴。

我可以打开手风琴，但是当我打开多个手风琴时，它不会关闭之前打开的手风琴，有没有办法在单击另一个链接时关闭打开的手风琴？

$('li.accordion-nav a').click(function() {
    var aLink = $(this).attr('href').replace(/^.*?(#|$)/,'');
    $('#' + aLink).collapse('show', function(){  
        $('.accordion-panel').not('#' + aLink).collapse('hide');
    });
});

【问题讨论】：

我回答了你的问题。如果您有任何要添加的内容，请随时发表评论。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

据我正确理解，你可以使用这样的东西：

JS：

$( "select" ).change(function(e) {
    var val = $("select option:selected").val();
    $('a#' + val).click();
});

$('a[data-parent="#accordion"]').click(function(e) {
    $('select#dropdown').val($(this).attr('id'));
});

HTML：

 <div>
        <select id='dropdown'>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
    </div>
    <br>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id='1'>
              Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            Anim pariatur cliche 
          </div>
        </div>
      </div>
      ....
    </div>

这里是jsfiddle link

【讨论】：

谢谢！我最初尝试过这个，但一定是做错了什么： $('a[href="#' + aLink + '"]').click();

【解决方案2】：

感谢 Phoenix 的帮助，我使用了这个：

$('li.accordion-nav a').click(function() {
    var aLink = $(this).attr('href').replace(/^.*?(#|$)/,'');
    $('a[href="#' + aLink + '"]').click();
    return false;
});

【讨论】：