Bootstrap折叠显示方法 - 防止跳转到部分?

时间:2017-08-14 11:37:16

标签: javascript jquery twitter-bootstrap

当手动触发.collapse('show')方法时,如何防止页面跳转到具有哈希id的部分?

例如,当我有以下网址

  http:example.com/page.php?#collapseOne

我使用以下jquery,它将使用哈希id扩展该部分,但它也会跳转到该部分。

        var anchor = window.location.hash;
        $(".collapse").collapse('hide');
        $(anchor).collapse('show'); 

        // this doesnt work becuase the .collapse('show') seems to overide it
        if (location.hash) {
            setTimeout(function() {
                window.scrollTo(0, 0);
            }, 1);
        }

当我手动调用`.collapse(' show')时如何阻止它跳转到该部分,如上例所示 - 我想要做的就是打开它而不是跳转到它? / p>

Html代码:

<div class="panel-group" id="accordion" aria-multiselectable="true">
   <div class="panel panel-default">
      <div class="panel-heading" id="headingOne">
         <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
             Collapsible Group Item #1
            </a>
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
              Lorem ipsum
          </div>
      </div>
   </div>
   <div class="panel panel-default">
      <div class="panel-heading" id="headingTwo">
         <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
         <div class="panel-body">
             Lorem ipsum
         </div>
      </div>
    </div>
</div>

0 个答案:

没有答案