我正在尝试创建一个函数,允许您单击一组项目中的一个项目,并折叠和展开所单击的特定项目的高度。然而,目前,无论单击什么项目,都会展开和折叠所有项目。我不确定最好的方法是什么。
<div class="wrapper">
<div class="myDiv" data-state="open" id="1"></div>
<div class="myDiv" data-state="open" id="2"></div>
<div class="myDiv" data-state="open" id="3"></div>
<div class="myDiv" data-state="open" id="4"></div>
</div>
`
class Height {
constructor(el) {
this.element = el;
}
get state(){
return $(this.element).attr('data-state');
}
set _state(newState){
$(this.element).attr('data-state',newState);
}
expand() {
$(this.element).css('height', '200px');
this._state = 'open';
}
collapse() {
$(this.element).css('height', '50px');
this._state = 'close';
}
toggle(){
if(this.state == 'open') {
this.collapse();
} else if(this.state == 'close') {
this.expand();
}
}
}
var myDiv = $('.myDiv');
var myDivInstance = new Height(myDiv);
$('body').on('click', function() {
myDivInstance.toggle();
});
最佳答案
第一个答案(不是 OOP):
我以更简单的方式重写了您的代码,希望它能满足您的需求。
$('.myDiv').on('click', function()
{
switch ($(this).css("height"))
{
case "200px":
$(this).css("height","50px");
break;
case "50px":
$(this).css("height","200px");
break;
default:
$(this).css("height","50px");
break;
}
});
您的点击事件的主要错误是,您为整个 body 标签而不是每个元素编写了一个监听器。
选择器('.myDiv')可以轻松地替换为('.wrapper *'),因此包装类的每个子级都会获得这些点击行为,并且像素的那些硬编码数字可以替换为变量,但这取决于你。我希望这会有所帮助,因为我对 JS 和 Jquery 还很陌生。
第二个答案(OOP):
$('.myDiv').on('click', function() {
var myDivInstance = new Height(this);
myDivInstance.toggle();
});
声明您的类后,这就是点击事件处理程序的样子。 每次单击 div 时都会构建一个对象并切换它。 我希望这个答案适合您的需求。
关于javascript - 如何使用 OOJS 创建 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54607072/