Question

我们组织的非技术人员需要能够创建自举手风琴，但没有从头开始创建它们的技能。我的解决方案是允许他们使用一组“accordion-panel”构建div，然后从这些div中构建手风琴。

我到目前为止的代码如下，但它不适用于实际的展开/折叠机制。我如何使它工作？

<div class="accordion-panel open" id="accordion-panel_open">
   <h4>Why did you do that?</h4><p>fasdfqw fasdf asdf asdf</p>
</div>

<div class="accordion-panel" desc="title of this panel" id="accordion-panel">
   strong text<h4>No really...Why did you do that?</h4><p><br>dfasd fasdf asdf asdf asdf sadf sdf</p>
</div>

<script>

$(document).ready( function() {
  var $code = false;
  var $panels = $(".accordion-panel");

  if ($panels.length > 0) {
    var $panelloc = $panels.last().after('<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">');
    var i=1;
    $panels.each(function() {
      var $this = $(this);
      var $heading = $this.find("h4");
      var headingtext = $heading.text();
      $heading.remove();
      var panelcode = '<div class="panel panel-default"><div class="panel-heading" role="tab" id="panel'+i+'"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#info'+i+'" aria-expanded="true" aria-controls="info'+i+'">'+headingtext+'</a></h4></div><div id="info'+i+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="panel'+i+'"><div class="panel-body">'+$this.text()+'</div></div></div>';
      $("#accordion").append(panelcode);
      i++;
      $this.remove();

    });
  }
});

</script>

Answer 1

我让他们的代码结构有点不同：

<div id="accordian">
    <div class="panel open">
       <h4 class="title">Why did you do that?</h4>
       <div class="content">
            <p>fasdfqw fasdf asdf asdf</p>
        </div>
    </div>

    <div class="panel">
        <h4 class="title">title of this panel</h4>
        <div class="content">
       strong text<h4>No really...Why did you do that?</h4>
            <p>dfasd fasdf asdf asdf asdf sadf sdf</p>
        </div>
    </div>
</div>

对于他们想做的事情，这是更明确的，除了“手风琴”之外，你不要求他们在那里放置任何功能性的ID。

这是我使用的脚本：

$('#accordian')
    .addClass('panel-group');

$('#accordian .panel')
    .addClass('panel-default');

$('#accordian h4.title')
    .removeClass('title')
    .addClass('panel-title')
    .each( function(id){
        $(this).wrapInner('<a data-toggle="collapse" data-parent="#accordion" href="#ac' + id + '"></a>');
    })
    .wrap( '<div class="panel-heading"></div>' );

$('#accordian .content')
    .removeClass('content')
    .addClass('panel-collapse collapse')
    .addClass( function(){
        return $(this).parent().hasClass('open') ? 'in':'';
    })
    .each( function(id){
        $(this).attr('id', 'ac' + id);
    })
    .wrapInner('<div class="panel-body"></div>');

这是一个jsfiddle： https://jsfiddle.net/mckinleymedia/hshqgvk8/

动态应用bootstrap手风琴功能

1 个答案: