Question

我的Javascript有问题。我有一个可折叠区域，其中包含内容和输入字段供我的用户编写。我已经创建了一个折叠并打开div的JavaScript函数，但问题是你不能在这个区域的输入字段上写一些东西，因为整个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

工作版：

＆＃13;

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

＆＃13;

.content {
display: none;
}

＆＃13;

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

＆＃13;

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

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

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

4 个答案: