[英]Bootstrap accordion panels with button on body
我有一个填充多个面板的查询。 当我单击面板主体内的特定按钮时,我想隐藏面板并显示下一个面板。 手风琴不起作用,我无法弄清楚原因。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.