Question

我有一个容器中显示的项目列表，其中包含与每个容器关联的下拉列表。容器列表的外观如下所示：

当我点击按钮时，会显示下拉菜单，但是，当我尝试单击任何其他按钮按钮时，dd会保持并且不会隐藏。列表是动态创建的。我想要做的是当前点击的元素与之前点击的元素相同，然后隐藏第一个dd菜单有没有办法检查点击的元素是否等于javascript中的前一个被点击的元素（没有jquery）

代码：

afterRender: function() {
   this.el.on('click', function(e) {
     //here i want to check (if e.getTarget() === secondClickedEment) { //do something}          
   },this);
}

这可能吗？感谢

Answer 1

您可以使用是函数使用jQuery测试对象相等性。需要1.6或更高。

var stuff = $('#stuff');
var thing = stuff;


if (stuff.is(thing)) {
    // the same
}

因此，对于您的情况，这应该有效：

afterRender: function() {
   this.el.on('click', function(e) {
       var clickedElm = $(e.getTarget());
       var secondElm = $(secondClickedElm);
       if (clickedElm.is(secondElm)){
           // same elements
       }                   
   },this);
}

Answer 2

这样做的一种方法是动态地向div添加/删除一个类，指示它是否打开。然后单击，您可以切换该类。

示例：

let containers = document.getElementsByClassName('container');
for (let i=0; i<containers.length; i++) {
    let button = containers.item(i).getElementsByClassName('button')[0];
    let menu   = containers.item(i).getElementsByClassName('menu'  )[0];
    button.addEventListener('click', function() {
        menu.classList.toggle('open');
    });
}

然后在你的CSS中：

.open {
    display: block;
}

Answer 3

jQuery示例：

使用var lastClicked;来保存最后点击的元素，然后每次点击检查是否点击了相同的元素，然后重置lastclicked，否则更新lastclicked。

var lastClicked;
$('.container').on('click', function(e) {
  if (this == lastClicked) {
    lastClicked = '';
    $(this).children('.menu').hide();
  } else {
    lastClicked = this;
    $('.menu').hide();
    $(this).children('.menu').show();
  }
});

.container {
  border: 1px solid #333;
  height: 300px;
  width: 200px;
  float: right;
  margin-right: 20px;
}

.menu {
  display: none;
}

.button {
  border: 1px solid #333;
  background: #333;
  float: right;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="button">

  </div>
  <div class="menu">
    <div class="option1 option">option1</div>
    <div class="option2 option">option2</div>
  </div>
</div>

<div class="container">
  <div class="button">

  </div>
  <div class="menu">
    <div class="option1 option">option1</div>
    <div class="option2 option">option2</div>
  </div>
</div>

<div class="container">
  <div class="button">

  </div>
  <div class="menu">
    <div class="option1 option">option1</div>
    <div class="option2 option">option2</div>
  </div>
</div>

检查当前点击的元素是否等于之前点击的元素-Javascript

3 个答案: