1

所以我正在使用 Bootstrap Javascript 组件 Collapse 和 Modal。我添加了一个简单的可点击元素来在折叠标题中打开一个模式。我使用 jQuery 的 stopPropagation 来阻止崩溃的 click 事件从冒泡到 Bootstrap Javascipt 回调。我特意在我的 Jsfiddle 中保留了大部分未折叠的行,因为我的问题仅在内容超出查看屏幕高度时才会发生。

我的问题是,当我单击编辑按钮时内容发生变化,并且我单击编辑的折叠行在屏幕上不再可见:

http://jsfiddle.net/j22kf/

  $(function () {
      $(".collapse").collapse();

      $(".accordion").find('.btnEdit').click(function (ev) {
            ev.stopPropagation()
       });
      $(".btnEdit").click(function () {
             //ev.stopPropagation();
          $('#myModal').modal('show');
      });
  });

<div class="accordion" id="accordions">
    <div class="accordion-group">
        <div class="accordion-heading"><a href="#group-1" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 1&nbsp;<span class="btnEdit"><i class="icon-edit"></i>Click here to see issue</span></a>

        </div>
        <div id="group-1" class="accordion-body collapse in">
            <div class="accordion-inner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"><a href="#group-2" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 2</a>

        </div>
        <div id="group-2" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#group-3" data-parent="#accordions" data-toggle="collapse" class="accordion-toggle">Accordion Group 3</a>

        </div>
        <div id="group-3" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
        Collapsible Group 4
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">
      <div class="accordion-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
      </div>
    </div>
  </div>
    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
        Collapsible Group 5
      </a>
    </div>
    <div id="collapseFive" class="accordion-body collapse">
      <div class="accordion-inner">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
      </div>
    </div>
  </div>
    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse6">
        Collapsible Group 6
      </a>
    </div>
    <div id="collapse6" class="accordion-body collapse">
      <div class="accordion-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas
                    tempor vulputate. Donec auctor libero eu justo eleifend eget dapibus mauris
                    blandit. Mauris faucibus elementum mauris, a vehicula elit auctor ut. Ut
                    pellentesque faucibus tempor. Curabitur a nisi purus.</p>
      </div>
    </div>
  </div>
    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse7">
        Collapsible Group 7
      </a>
    </div>
    <div id="collapse7" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse8">
        Collapsible Group 8
      </a>
    </div>
    <div id="collapse8" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse9">
        Collapsible Group 9
      </a>
    </div>
    <div id="collapse9" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse10">
        Collapsible Group 10
      </a>
    </div>
    <div id="collapse10" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse11">
        Collapsible Group 11
      </a>
    </div>
    <div id="collapse11" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>


<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
4

1 回答 1

1

您需要防止浏览器尝试滚动到“#”锚点:

  $(".btnEdit").click(function (ev) {
       ev.preventDefault();
      $('#myModal').modal('show');
  });
于 2013-05-08T06:25:56.737 回答