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

只需添加一個可點擊部分的標題元素。