bootstrap 可折叠，展开后不折叠答案

【问题标题】：bootstrap collapsible not collapsing after expandedbootstrap 可折叠，展开后不折叠
【发布时间】：2015-11-13 13:17:49
【问题描述】：

Collapsible 在展开后没有折叠。它是在popover 中动态创建的。

这是我的jsFiddle：

$('.tooltiphelp').tooltip();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover(); 
$('[data-toggle="collapse"]').collapse();

jQuery('document').ready(function() {
    jQuery('#accordionRank').on('show hide', function() {
    jQuery(this).css('height', 'auto');
});

jQuery('#accordionRank').collapse({ parent: true, toggle: true }); 
});

var popover = $("#noteListDiv").find('.positive').popover({
    trigger: 'click',
    placement: 'bottom',
    content: function () {
        return func_getRank($(this).closest('tr').prop('id'));
    }
});

var func_getRank = function (ID) {
    var Rankdata = {"Rank":[{"ID": "114077", "NL": "1 of 25", "OF": "1 of 30", "MLB": "1 of 240"}]};
    var cshtml;
    cshtml = '<div>'
        + '<div class="accordion" id="accordionRank">'
          + '<div class="accordion-group">'
            + '<div class="accordion-heading">'
              + '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseNL">'
                + 'NL Rank: ' + Rankdata.Rank[0].NL
              + '</a>'
            + '</div>'
            + '<div id="collapseNL" class="accordion-body collapse">'
              + '<div class="accordion-inner">'
                + 'Anim pariatur cliche...'
              + '</div>'
            + '</div>'
          + '</div>'
          + '<div class="accordion-group">'
            + '<div class="accordion-heading">'
              + '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseOF">'
                + 'OF Rank: ' + Rankdata.Rank[0].OF
              + '</a>'
            + '</div>'
            + '<div id="collapseOF" class="accordion-body collapse">'
              + '<div class="accordion-inner">'
                + 'Anim pariatur cliche...'
              + '</div>'
            + '</div>'
          + '</div>'
          + '<div class="accordion-group">'
            + '<div class="accordion-heading">'
              + '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseMLB">'
                + 'MLB Rank: ' + Rankdata.Rank[0].MLB
              + '</a>'
            + '</div>'
            + '<div id="collapseMLB" class="accordion-body collapse">'
              + '<div class="accordion-inner">'
                + '<table id="MiniLeaderboard">'
                    + '<thead><tr>'
                        + '<th>Rank</th>'
                        + '<th>Hitter</th>'
                        + '<th>BAVG</th>'
                        + '<th>Hits/AB</th>'
                    + '</tr></thead>'
                    + '<tbody><tr>'
                        + '<td>1</td>'
                        + '<td>Christian Yelich</td>'
                        + '<td>.470</td>'
                        + '<td>39-for-83</td>'
                    + '</tr>'
                    + '<tr>'
                        + '<td>2</td>'
                        + '<td>Ryan Braun</td>'
                        + '<td>.397</td>'
                        + '<td>27-for-68</td>'
                    + '</tr>'
                    + '<tr>'
                        + '<td>3</td>'
                        + '<td>Adam Eaton</td>'
                        + '<td>.370</td>'
                        + '<td>37-for-100</td>'
                    + '</tr>'
                    + '<tr>'
                        + '<td>4</td>'
                        + '<td>Joey Votto</td>'
                        + '<td>.369</td>'
                        + '<td>31-for-84</td>'
                    + '</tr>'
                    + '<tr>'
                        + '<td>5</td>'
                        + '<td>Edwin Encarnation</td>'
                        + '<td>.364</td>'
                        + '<td>28-for-77</td>'
                    + '</tr></tbody>'
                + '</table>'
              + '</div>'
            + '</div>'
          + '</div>'
        + '</div>'
    + '</div>'
    ;
    return $(cshtml).html();
};

数据文本应来自 JSON。

这里有问题，请关注this screen cast。

请帮忙！感谢您的帮助。

【问题讨论】：

ReadNotes() 函数在哪里？
啊，请这个链接。我指的是 1st of 198 。那里的红色字体。
这就是问题所在。请注意。 screencast.com/t/gaLr1CvgWc
当前您收到错误 Uncaught ReferenceError: ReadNotes is not defined in browser console。当您尝试折叠项目时会发生此错误。你需要实现这一点。一旦你实施让我知道，以便我可以再次查看 jsfiddle
更新并删除了 ReadNotes() 先生。 jsFiddle

标签： javascript jquery twitter-bootstrap jquery-ui jquery-ui-accordion

【解决方案1】：

我已经更新了我的jsFiddle，它现在可以正常工作了。也许不是一个好主意，但现在看起来不错。

$(document).on('click', '.accordion-toggle', function(e) {
    $(e.target).css('text-decoration','none');
    var $_this = $(e.target).parent().next("div");
    var $_inner = $_this.find('div:first-child');
    if($_inner.hasClass('in')){
       $_inner.removeClass("in");
       $_this.removeClass("in");
   }
   else {
       $_inner.addClass("in");
       $_this.addClass("in");
   }
   func_accordionToggle(e.target);
});
var func_accordionToggle = function (e) {
   var $_this = $(e).parent().parent();
   var id = $(e).parent().next("div").attr('id');
   switch(id) {
       case 'collapseNL': 
           $('#collapseOF').removeClass("in");
           $('#collapseMLB').removeClass("in");
           $('#collapseOF').find('div:first-child').removeClass("in");
           $('#collapseMLB').find('div:first-child').removeClass("in");
           break;
       case 'collapseOF': 
           $('#collapseNL').removeClass("in");
           $('#collapseMLB').removeClass("in");
           $('#collapseNL').find('div:first-child').removeClass("in");
           $('#collapseMLB').find('div:first-child').removeClass("in");
           break;
       case 'collapseMLB': 
           $('#collapseNL').removeClass("in");
           $('#collapseOF').removeClass("in");
           $('#collapseNL').find('div:first-child').removeClass("in");
           $('#collapseOF').find('div:first-child').removeClass("in");
           break;
   };
}

感谢大家的帮助。

【讨论】：