1

我想在单击它时显示 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>

js代码

  $(document).ready(function()
  {
    $(".list").click(function(event){                
    $(this).children().slideToggle(1000);            
             });
 });
4

4 回答 4

2

将点击事件绑定到输入字段并调用 event.stopPropagation()。

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

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

或者：

$(".list").click(function(){
            $(this).children().toggle();
        });
        $(".list").children().click(function(e){
            e.stopPropagation();
        });
于 2012-09-11T08:40:37.167 回答
0

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

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

另一种方法是通过从子节点调用手动取消冒泡，event.preventDefault()但是当您希望子节点的其他部分可点击时，可能需要格外小心。

于 2012-09-11T08:38:38.527 回答
0

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

 evt.stopPropagation();
于 2012-09-11T08:42:06.900 回答
0

这是使用函数 jQuery.delegate http://api.jquery.com/delegate/的完美示例

您可以指定父元素（'.list'）

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

$(".list").delegate('label','click',function(event){                
    $(this).parent().slideToggle(1000);            
});
于 2012-09-11T09:08:02.150 回答