Twitter bootstrap CSS或Angular2中单击事件的滑出控件

我想实现一个滑动，它应该在点击事件时滑动。我搜索过，我能够实现悬停时的滑动，但我想在单击事件时使用它。此外，滑块应在按钮内部的点击事件时关闭/折叠，即在示例中，它应仅在关闭按钮的点击事件时关闭

我正在开发一个angular2应用程序，我在internet上得到的示例是Jquery。但我想用CSS或angular2实现它

请查找实现

---

有什么想法可以实现吗？

有很多方法可以实现这一点，但根据您的代码，容易的是：

您只需要单击添加一个类

[class.slideItOut]="slideItOut" (click)="slideItOut=true"

在这里：

<div id="slideout" [class.slideItOut]="slideItOut" (click)="slideItOut=true">
    <img src="http://img.usabilitypost.com.s3.amazonaws.com/1104/css_slideout/feedback.png" alt="Feedback" />
    <div id="slideout_inner">
        <form>
            <textarea></textarea>
            <input type="submit" value="Close"></input>
        </form>
    </div>
</div>

然后，将css更新为：

#slideout.slideItOut {
    right: 250px;
}
#slideout.slideItOut #slideout_inner {
    right: 0;
}

另外，不要忘记在其类中定义slideOut变量：

export class MySliderComponent {

   private slideItOut = false;
...

---

这是可能的。你现在在哪里工作有代码吗？

export class MySliderComponent {

   private slideItOut = false;
...