javascript - 如何使用 OOJS 创建 Accordion

Question

我正在尝试创建一个函数，允许您单击一组项目中的一个项目，并折叠和展开所单击的特定项目的高度。然而，目前，无论单击什么项目，都会展开和折叠所有项目。我不确定最好的方法是什么。

<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();
});

Answer 1

第一个答案(不是 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 时都会构建一个对象并切换它。我希望这个答案适合您的需求。