遇到问题而无法解决问题。试图使用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,它就不起作用(它不会崩溃或打开内容)。如何在不改变结构的情况下完成这项工作?
答案 0 :(得分:1)
一种方法是使用全局处理程序,通过检查其id或类或其他属性或属性,可以处理多个项目。
在代码段下面找到&#34;区域&#34; div并将其作为参数传递给areaCollapse
函数。它还会检查,因此在调用two
之前,只有area
或areaCollapse
div(彩色石灰/黄色)被点击。
原始代码也没有&#34;打开&#34; class已添加到它(第二个div组),这意味着需要单击两次,所以我更改了areaCollapse
函数来检查显示属性。
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;
答案 1 :(得分:0)
您需要在绑定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'); });
}