twitter-bootstrap - CSS或Angular2中点击事件的SlideOut控件

Question

我想实现一个滑出，它应该在点击事件时滑出。我进行了搜索，我能够在悬停时实现滑出，但我想在点击事件中使用它。 slideout 也应该在放置在里面的按钮上的点击事件上关闭/折叠，即在这个例子中它应该只在关闭按钮的点击事件上关闭。

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

请查找实现 here

任何想法如何实现？

Answer 1

有很多方法可以做到这一点，但根据您的代码，最简单的是:

你只需要在点击时添加一个类

[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>

很明显，如果你想让它切换:

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

然后，将您的 css 更新为:

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

此外，不要忘记在类中定义 slideItOut 变量:

export class MySliderComponent {

   private slideItOut = false;
...