Question

我想在使用点击时显示div class {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 code

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

Answer 1

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

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

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

或：

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

Answer 2

您可以随时检查点击是否实际从子节点冒泡，如果是，则将其删除：

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

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

Answer 3

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

 evt.stopPropagation();

Answer 4

这是使用函数jQuery.delegate http://api.jquery.com/delegate/

的完美示例

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

然后，您将在父元素（'label'）中指定要使用“单击”功能的子对象。注意，函数被称为“子元素”，因此您需要切换.parent（）元素

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

jquery toggle div show hide

4 个答案: