使用javascript使div中的div可单击

Question

有问题，无法解决。 试图使用QuerySelectorAll并将逗号与GetElementsByClassName分隔，但这没有用，所以我想知道如何解决此问题。

我有这个HTML：

<div class="area">Test title
  <div class="some content" style="display: none">blablbala
    <input></input>
  </div>
  <div class="two">This should be clickable too</div>
</div>

<div class="area">
  Test title
  <div class="some content">
    blablbala
    <input></input>
  </div>
  <div class="two">This should be clickable too</div>
</div>

JS：

function areaCollapse() {
  var next = this.querySelector(".content");

  if (this.classList.contains("open")) {
    next.style.display = "none";
    this.classList.remove("open");
  } else {
    next.style.display = "block";
    this.classList.add("open");
  }
}

var classname = document.getElementsByClassName("area");

for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', areaCollapse, true);
}

http://jsfiddle.net/1BJK903/nb1ao39k/6/

CSS：

.two {
position: absolute;
top: 0;
}

因此，现在可以单击类名称为“ area”的div。 我将div定位为绝对“ class”类，现在整个div是可单击的，除了另一个div所在的位置。 如果单击类名称为“ two”的div，则它不起作用（它不会折叠或打开内容）。 如何在不更改结构的情况下完成这项工作？

Answer 1

一种方法是使用全局处理程序，您可以通过检查其ID或类或其他属性或属性来处理多个项。

在以下代码段中找到“ area” div，并将其作为参数传递给areaCollapse函数。 它还会检查，以便仅在调用areaCollapse之前单击了two或area div（彩色石灰/黄色）。

同样，原始代码还没有添加“ open”类（第二个div组），这意味着需要单击两次，因此我更改了areaCollapse函数以检查display属性。

 function areaCollapse(elem) { var next = elem.querySelector(".content"); if (next.style.display != "none") { next.style.display = "none"; } else { next.style.display = "block"; } } window.addEventListener('click', function(e) { //temp alert to check which element were clicked //alert(e.target.className); if (hasClass(e.target,"area")) { areaCollapse(e.target); } else { //delete next line if all children are clickable if (hasClass(e.target,"two")) { var el = e.target; while ((el = el.parentElement) && !hasClass(el,"area")); if (targetInParent(e.target,el)) { areaCollapse(el); } //delete next line if all children are clickable } } }); function hasClass(elm,cln) { return (" " + elm.className + " " ).indexOf( " "+cln+" " ) > -1; } function targetInParent(trg,pnt) { return (trg === pnt) ? false : pnt.contains(trg); } 

 .area { background-color: lime; } .two { background-color: yellow; } .area:hover, .two:hover { background-color: green; } .some { background-color: white; } .some:hover { background-color: white; } 

 <div class="area">Test title clickable 1 <div class="some content" style="display: none">blablbala NOT clickable 1 </div> <div class="two">This should be clickable too 1</div> </div> <div class="area">Test title clickable 2 <div class="some content">blablbala NOT clickable 2 </div> <div class="two">This should be clickable too 2</div> </div> <div class="other">This should NOT be clickable</div> 

Answer 2

如果要使用jQuery：

 $('.two').click(function(){
       //action here
    });

Answer 3

绑定classname ，您需要找到two元素，并且还要绑定它们。

var classname = document.getElementsByClassName("area");
for(var i=0; i < classname.length; i++){
    classname[i].addEventListener('click', areaCollapse, true);
    var twoEl = classname[i].getElementsByClassName("two")[0];
    twoEl.addEventListener('click', function(e) { console.log('two clicked'); });
}