使用Javascript

时间:2015-10-09 06:18:13

标签: javascript html css

遇到问题而无法解决问题。试图使用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,它就不起作用(它不会崩溃或打开内容)。如何在不改变结构的情况下完成这项工作?

2 个答案:

答案 0 :(得分:1)

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

在代码段下面找到&#34;区域&#34; div并将其作为参数传递给areaCollapse函数。它还会检查,因此在调用two之前,只有areaareaCollapse div(彩色石灰/黄色)被点击。

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

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