Javascript jquery切换div显示隐藏

我想在use单击div类{list}时显示它的内部子类，当用户再次单击它时，它将隐藏它们。但问题是，当用户单击输入字段时，它也会将其隐藏起来

<div class="list">
 <label>Enter your name</label>
 <input type="text" class="data"/>
</div>

<div class="list">
 <label>Enter your Number</label>
 <input type="text" class="data"/>
</div>

---

您可以始终检查单击是否确实是从子节点冒泡的，如果是，则直接将其删除：

$(".list").click(function(event){                
    if($(event.target).parents('.list').length > 0) { return; }
    $(this).children().slideToggle(1000);            
});

---

另一种方法是通过从子节点调用

event.preventDefault（）

手动取消冒泡，但如果希望子节点的其他部分可单击，则可能需要额外小心。

将单击事件绑定到输入字段并调用event.stopPropagation（）

描述：防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

或：

---

这是因为当您单击输入元素时，事件会出现气泡。必须使用以下代码行停止事件的事件传播：

 evt.stopPropagation();

---

这是使用函数jQuery.delegate的完美示例

可以指定父元素（“.list”）

然后，您将在父元素（“标签”）中指定要在其中使用“单击”功能的子对象。注意，函数被调用为“child元素”，所以您需要切换.parent（）元素

$(".list input").click(function(e){
    e.stopPropagation();
});

$(".list").click(function(){
            $(this).children().toggle();
        });
        $(".list").children().click(function(e){
            e.stopPropagation();
        });

 evt.stopPropagation();

$(".list").delegate('label','click',function(event){                
    $(this).parent().slideToggle(1000);            
});