Question

使用typescript如何展开和折叠bootstrap面板尝试下面的代码，但没有成功。我想打开打字稿。

代码-1

<div class="panel panel-white">
    <div class="panel-heading removeColor" id="passins_heading">
            <h6 class="panel-title">
                <button class="collapsed" id="openPassion" data-toggle="collapse" data-target="#Passions" >Click Here</button>
            </h6>           
    </div>

    <div id="Passions" class="panel-collapse collapse">
        <div class="panel-body">                

                    Content -1              
        </div>
    </div>
</div>

线-2

<div class="panel panel-white">
        <div class="panel-heading removeColor" id="passins_heading">
                <h6 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href="#Passions"> Click Here </a>
                </h6>           
        </div>

        <div id="Passions" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">

                        Content -1                                              

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

jquery的：

import * as JQuery from 'jquery';


setTimeout(() => {
                JQuery( '#openPassion' ).toggle();
            }, 5000 );

如何扩展和折叠组件？

Answer 1

可能的解决方案可能是这样的：

首先，在按钮上创建一个引用： <button #myButton ...

然后在您的代码中，您可以使用ViewChild装饰器来查找它：

  @ViewChild('myButton')
  private myButtonRef: ElementRef;

然后，您可以在控件类中“单击”它：

setTimeout(() => {
            this.myButtonRef.nativeElement.click();
        }, 1000 );  }

Working plunker此处。

打字稿 - 扩展和折叠bootstrap手风琴

1 个答案: