在单击模具时更改CSS类
是否可以在Stencil.js中使用W3School中的简单菜单动画 我正在尝试设置单击事件的样式,但无法使其正常工作。活动正在进行中,但我无法安排上课 在my.tsx中:在单击模具时更改CSS类,css,stenciljs,Css,Stenciljs,是否可以在Stencil.js中使用W3School中的简单菜单动画 我正在尝试设置单击事件的样式,但无法使其正常工作。活动正在进行中,但我无法安排上课 在my.tsx中: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'topbar-component', styleUrl: 'topbar-component.css', shadow: true }) export class To
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
private menuToggle(e) {
return (
e.classList.toggle("change");
);
}
render() {
return (
<div class="topbar-menu">
<div class="container" onClick={(e) => this.menuToggle(e)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
)
}
}
我得到错误:未捕获类型错误:无法读取未定义的属性“toggle”我让它工作了。我终于找到了学生名单 所以只需将此添加到您的菜单切换
private menuToggle(e) {
return (
e.currentTarget.classList.toggle("change")
);
}
我成功了。我终于找到了学生名单 所以只需将此添加到您的菜单切换
private menuToggle(e) {
return (
e.currentTarget.classList.toggle("change")
);
}
可以使用状态属性执行此操作:
import { Component, Prop, State, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
@State() isMenuOpen: boolean = false;
private menuToggle() {
this.isMenuOpen = !this.isMenuOpen;
}
render() {
return (
<div class="topbar-menu">
<div class={{ container: true, change: this.isMenuOpen }}" onClick={(e) => this.menuToggle(e)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
)
}
}
可以使用状态属性执行此操作:
import { Component, Prop, State, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
@State() isMenuOpen: boolean = false;
private menuToggle() {
this.isMenuOpen = !this.isMenuOpen;
}
render() {
return (
<div class="topbar-menu">
<div class={{ container: true, change: this.isMenuOpen }}" onClick={(e) => this.menuToggle(e)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
)
}
}
这可能是一个更好的方法。我要试试看!这可能是一个更好的方法。我要试试看!