使用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'); });
}