手风琴活动中的Bootstrap手风琴

时间:2015-11-22 18:09:41

标签: twitter-bootstrap twitter-bootstrap-3

我在另一支手风琴里面有手风琴,我正在尝试处理内手风琴的表演/隐藏事件。

问题在于,当我扩展内部手风琴时,有两个被触发的事件,一个用于内手风琴,一个用于外手风琴。 可以在另一支手风琴里面放一把手风琴吗?当我点击内部手风琴时,内部手风琴只能被发射?

这是我的代码

的示例
<div class="panel-group" id="accordion1">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                Collapsible Group #1
              </a></h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
              <div class="panel-body">
                This is a simple accordion inner content...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                Collapsible Group #2 (With nested accordion inside)
              </a></h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">

                <!-- Here we insert another nested accordion -->

                <div class="panel-group" id="accordion2">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                        Collapsible Inner Group Item #1
                      </a></h4>
                    </div>
                    <div id="collapseInnerOne" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                        Collapsible Inner Group Item #2
                      </a></h4>
                    </div>
                    <div id="collapseInnerTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Inner accordion ends here -->

              </div>
            </div>
          </div>
        </div>


        <script>
            $(document).ready(function() {

                $('.collapse').on('show.bs.collapse', function (e) {
                    alert('show' + $(this).attr('id'));
                });

                $('.collapse').on('hide.bs.collapse', function (e) {
                    alert('hide' + $(this).attr('id'));
                });

            });
        </script>

2 个答案:

答案 0 :(得分:1)

经过几个小时的搜索后,我找到了解决方案

我们需要添加: event.stopPropagation();

   $('.collapse').on('show.bs.collapse', function (e) {
      event.stopPropagation();
      alert('show' + $(this).attr('id'));
   });

答案 1 :(得分:0)

我认为您遇到问题是因为您使用类.container作为选择器。如果使用accorddion的id,则不需要使用stopPropagation(),因为事件不相同。

printf("%4.1f ", mat[i][j]);
// Here a space is added after printing the number.
// "%5.1f" could also be used for alignment (difference: the space will be prefixed),
// but then if the number will have 3 or more integer digits, it will be displayed
// "concatenated" with the previous one. Using a space prevents this
希望可以提供帮助!