Bootstrap 崩溃和 ui-router [英] Bootstrap collapse and ui-router

问题描述

我在使用 ui-router 和使用引导程序崩溃时遇到问题.

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">数据

这是页面 localhost/#/root/mypage/.因此，单击我"指向 localhost:\#collapseOne，这会将我带到我网站的默认页面.

解决方案

您可以通过使用 data-target 属性(将执行相同的工作)而不是使用 href 来简单地解决您的问题 影响路由的属性

标记

点击我</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"aria-labelledby="headingOne">数据

I have issue with ui-router and using bootstrap collapse.

<div class="panel panel-default" id="accordion" >
    <div role="tab" id="headingOne">
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Click me
        </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            Data
    </div>
</div>

This is the page localhost/#/root/mypage/. So the 'Click me' is pointed to localhost:\#collapseOne that leads me to default page of my site.

解决方案

You could simply fix you issue by using data-target attribute(will do the same work) instead of using href attribute which is affecting routing

Markup

<div class="panel panel-default" id="accordion" >
    <div role="tab" id="headingOne">
       <a role="button" href="javascript:;" data-toggle="collapse" data-parent="#accordion" 
          data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Click me
        </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
     aria-labelledby="headingOne">
        Data
    </div>
</div>

这篇关于Bootstrap 崩溃和 ui-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！