Bootstrap手风琴式拼接，带纽扣

Bootstrap accordion panels with button on body

本文关键字：拼接 手风琴 Bootstrap      更新时间：2023-09-26

我有一个查询，它填充了几个面板。当我单击面板主体内的特定按钮时，我想隐藏面板并显示下一个。手风琴坏了，我不明白为什么。

HTML：

<div class="panel-group" id="accordion">
<?php   while ($row = mysqli_fetch_array($resultDespiste)){ ?>
    <div class="panel panel-default">
      <div class="panel-heading">Despiste # <?php echo $row['ordem']; ?>
      </div>
      <?php if ($row['ordem'] == 1) { ?>
      <div id="<?php echo $row['idDespiste']; ?>"  class="panel-collapse collapse in">
          <div class="panel-body" id="<?php echo $row['ordem']; ?>">
            <?php echo $row['textoDespiste']; ?>
            <br/><button class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="<?php echo $row['idDespiste']; ?>">Não resolveu</button>
                 <button id="Done">Resolveu</button>
          </div>
      </div>
      <?php } else { ?>
      <div id="<?php echo $row['idDespiste']; ?>"  class="panel-collapse collapse">
          <div class="panel-body" id="<?php echo $row['ordem']; ?>">
            <?php echo $row['textoDespiste']; ?>
            <br/><button class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="<?php echo $row['idDespiste']; ?>">Não resolveu</button>
                 <button id="Done">Resolveu</button>
          </div>
      </div>      
      <?php }?>
    </div>
    <?php }?>
</div>

我的脚本：

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

是data-target错了吗？或者，我应该尝试以不同的方式构建函数，针对按钮父面板，隐藏它并显示下一个？

这里是一个工作示例。我删除了php代码以使其更干净：

var $accordion = $('#accordion');
$accordion.find('.panel-heading').on('click', function() {
  // uncomment the line below if you want to close other opened panels 
  $accordion.find('.panel-collapse.in').collapse('hide');
  $(this).siblings('.panel-collapse').collapse('toggle');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">Heading 1</div>
    <div class="panel-collapse collapse in">
      <div class="panel-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nisl dictum, tempor sapien ut, sagittis neque.
      </div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">Heading 2</div>
    <div class="panel-collapse collapse">
      <div class="panel-body">
        Cras blandit mattis aliquam. Vestibulum magna ligula, tempor et eros in, ultricies sollicitudin dolor. 
      </div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">Heading 3</div>
    <div class="panel-collapse collapse">
      <div class="panel-body">
      Vestibulum magna ligula, tempor et eros in, ultricies sollicitudin dolor. 
      </div>
    </div>
  </div>
</div>

相关文章：