如何使用Javascript解决整个可点击div？

Question

我的Javascript有问题。 我有一个可折叠区域，其中包含内容和输入字段，供用户在上面写东西。 我制作了一个JavaScript函数，它可以折叠并打开div，但是问题是您无法在此区域的输入字段中写东西，因为整个div都是可单击的。 我不希望整个div变得混乱，而只希望标题可点击的区域。

我怎样才能使标题只有标题可点击？

HTML：测试标题blablbala

<div class="area">Test title
       <div class="some content">blablbala
          <input></input>
       </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/

我认为我必须更改HTML的结构。 我已经尝试过了：

Answer 1

如果您想要的是，请检查此小提琴： http : //jsfiddle.net/nb1ao39k/5/

我添加了这个：

if(this != evt.target){
    return;
}// if the element that listened to the event is not the element who was clicked then ignore

Answer 2

冒泡之前，请检查事件是否进入输入元素：

function areaCollapse(event) {
    if (event.target.tagName == "INPUT") {
        return;
    }
    ...
}

或者，仅允许单击标题，而不允许div的其余部分。

Answer 3

工作版本：

 function areaCollapse() { var next = this.parentNode.children[1]; 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("title"); for(var i=0;i<classname.length;i++){ classname[i].addEventListener('click', areaCollapse, true); } 

 .content { display: none; } 

 <div class="area"><div class='title'>Test title</div> <div class="some content">blablbala <input></input></div> </div> <div class="area"><div class='title'>Test title</div> <div class="some content">blablbala <input></input></div> </div> 

Answer 4

您可以尝试以下方法：

HTML：

<div class="area">
    <h2 class="clickable-header">Test title</h2>
       <div class="some content" style="display: none">blablbala
          <input></input>
       </div>
    </div>

<div class="area">
    <h2 class="clickable-header">Test title</h2>
       <div class="some content">blablbala
          <input></input>
       </div>
    </div>

JS：

function areaCollapse() {
    var next = this.nextElementSibling;

    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("clickable-header");

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

只需添加一个可点击部分的标题元素。