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

您在点击事件中主要出错的地方是，您为整个身体标签（而不是每个元素）编写了一个侦听器。

选择器（'.myDiv'）可以很容易地用（'.wrapper *'）替换，因此包装器类的每个子代都将获得这些点击行为，并且这些像素的硬编码数字可以用变量替换，但那取决于您。我希望这会有所帮助，因为我还是JS和Jquery的新手。

第二个答案（OOP）：

$('.myDiv').on('click', function() {
var myDivInstance = new Height(this);
myDivInstance.toggle();
});

在声明您的类之后，这就是单击事件处理程序的外观。每次单击div并切换它时，都会构建一个对象。我希望这个答案适合您的需求。

如何使用OOJS创建手风琴

1 个答案: