Question

如果面板打开Sectors和Issue标签应该隐藏，如果面板折叠，则应显示部门和问题。

这是我的js文件

          $(window).load(function () {
            var parent = $('.panel-group .panel-heading');
            parent.each(function (i, el) {
                //el is element used for "{var parent}" class to execute value one by one 
                var el = $(el);
                var collapsed = el.find('.panel-title a').hasClass('collapsed');

                if (collapsed == true) {
                    el.find(".show-hide-si").show('slow');
                } else {
                    el.find(".show-hide-si").hide('slow');
                }

                /**
                 * this will run on click to show and hide for sector&issues
                 * this is tricky,if you click and class is collapsed 
                 */
                el.find('.panel-title a').click(function () {
                    var collapsed = $(this).hasClass('collapsed');
                    if (collapsed == false) {
                        el.find(".show-hide-si").show('slow');
                    } else {
                        el.find(".show-hide-si").hide('slow');
                    }
                });

            });
        });

这是有效的，但如果panel-p1打开，我点击panel-p2，两个面板文本都会隐藏。

我的数据是动态的，所以使用类似<div id="collapse_<?php print $key; ?>"的类而不是collapseOne，Two，Three。

在HTML中

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="panel<?php print $key; ?>">
    <div class="panel-heading" role="tab" id="heading_<?php print $key; ?>">
        <h4 class="panel-title">
            <a <?php print $clsa; ?> role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_<?php print $key; ?>" aria-expanded="true" aria-controls="collapse_<?php print $key; ?>">
                Program : <?php print $ptitle; ?>
            </a>                
        </h4>
        <div class="show-hide-si">
            <div class="sector">Sectors : <?php print $sectors_of_interes; ?></div>
            <div class="issues">Issues : <?php print $pro_problem; ?></div>
        </div>
    </div>

    <div id="collapse_<?php print $key; ?>" class="panel-collapse <?php print $clsin; ?>" role="tabpanel" aria-labelledby="heading_<?php print $key; ?>">
        <div class="panel-body">

其他问题是，如果我点击面板P2它打开然后我点击P1（P1接近），P1打开但P2没有接近两者都打开。

Answer 1

参见此示例

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

＆＃13;

在bootstrap中，您可以调用此类事件方法

$('#accordian').on('hidden', function () {
  // do something…
})

Bootstrap手风琴，在标题面板中显示/隐藏文字

1 个答案: