面板标题主体的折叠/展开

下面给出的代码用于折叠/展开。我使用这个代码，其中有多个面板标题折叠/展开。它运行良好，但我不知道这是如何工作的。我从互联网上获取了这些代码。如果有人能解释，这里发生了什么或者指向我哪里，我可以在这里读到这些信息，这将会有所帮助。秒，我可以在不改变页面的情况下使用相同的功能，其中只有一个面板标题div。如果是，请举例说明。在上面的代码面板标题主体的折叠/展开

function bindCollapseEvents(panels, numPanels) { 
    for (var i = 0 ; i < panels.length ; i++) { 
     var heading = $(panels[i]).children('.panel-heading'); 
     var bodyCollapse = $(panels[i]).children('.panel-body'); 
     if (heading.length != 0 && bodyCollapse.length != 0) { 
      numPanels++; 
      // $(heading[0]).attr('data-toggle', 'collapse'); 
      // Use this instead of the data-toggle attribute to let [more/less] be clicked without collapsing panel 
      if ($(heading[0]).attr('class') == 'panel-heading') { 
       $(heading[0]).click(toggleSingleCollapse); 
      } 
      $(heading[0]).attr('data-target', '#panelBodyCollapse'); 
      $(heading[0]).attr('id', 'panelHeading'); 
      $(heading[0]).css('cursor', 'pointer'); 
      $(bodyCollapse[0]).attr('id', 'panelBodyCollapse'); 
     } 
    } 
    return numPanels; 
} 




function toggleSingleCollapse(e) { 
    if (!$(e.target).is('a') && !$(e.target).is('input')) { 
     var glyphIcon = $(this).find('.glyphicon'); 
     var className = $(glyphIcon[0]).attr('class'); 
     if (className.indexOf('glyphicon-chevron-up') != -1) { 
      hideSingleCollapse($(e.currentTarget).attr('data-target')); 
     } else { 
      showSingleCollapse($(e.currentTarget).attr('data-target')); 
     } 
    } 
} 



function showSingleCollapse(e) { 
    var heading = $(e).parent().children('.panel-heading'); 
    var glyphIcon = $(heading[0]).find('.glyphicon'); 
    $(glyphIcon[0]).removeClass('glyphicon-chevron-down'); 
    $(glyphIcon[0]).addClass('glyphicon-chevron-up'); 
    $(e).collapse('show'); 
    $(heading).find('a.btn').show(); 
} 

function hideSingleCollapse(e) { 
    var heading = $(e).parent().children('.panel-heading'); 
    var glyphIcon = $(heading[0]).find('.glyphicon'); 
    $(glyphIcon[0]).removeClass('glyphicon-chevron-up'); 
    $(glyphIcon[0]).addClass('glyphicon-chevron-down'); 
    $(e).collapse('hide'); 
    $(heading).find('a.btn').hide(); 
}

来源

2016-02-28 tarun14110

也许你应该找地方开始你找到了真正的逻辑它。 –

@ScottHunter没有关于它的任何文档或解释。他们只是给代码。 – tarun14110

写得不好，需要太多的解释。你可以在[jQuery API]（http://api.jquery.com/） – charlietfl

主要的是开关逻辑，其用于hide/show相应内容。

唯一开关逻辑被在这里做添加/移除在其上控制其可见性等手风琴

切换逻辑模块的元素各自CSS class：showSingleCollapse(e) & hideSingleCollapse(e)

除此之外还有是验证检查的逻辑，如果不存在，则不添加相同的css class。

我的建议：有更好的手风琴逻辑赫然出现在jQuery Accordion本身，但你可以参考这个代码来理解其背后手风琴

来源

2016-02-28 06:43:25 dreamweiver

面板标题主体的折叠/展开

回答

相关问题