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

所以现在，带有classname＆＃34; area＆＃34;的div是可点击的。我把div放在了班级＆＃34;两个＆＃34;绝对，现在整个div是可点击的，除了这个另外的div。如果你点击带有类名＆＃34;两个＆＃34;的div，它就不起作用（它不会崩溃或打开内容）。如何在不改变结构的情况下完成这项工作？

Answer 1

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

在代码段下面找到＆＃34;区域＆＃34; div并将其作为参数传递给areaCollapse函数。它还会检查，因此在调用two之前，只有area或areaCollapse div（彩色石灰/黄色）被点击。

原始代码也没有＆＃34;打开＆＃34; class已添加到它（第二个div组），这意味着需要单击两次，所以我更改了areaCollapse函数来检查显示属性。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您需要在绑定two时找到classname元素，并将其绑定。

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

使用Javascript

2 个答案: