点击框中的jQuery应该保持打开状态吗？

Question

它不是简单的解释......这是我的HTML & jQuery代码：

HTML：

<div class="button"> 
    search 
    <div class="hiddencontent"><input type="search" name="search" /> </div> 
</div> 

<div class="button"> 
    phone 
    <div class="hiddencontent">9464564654564</div> 
</div> 

<div class="button"> 
    mail 
    <div class="hiddencontent">example@example.com</div> 
</div> 

SCRIPT：

$('.button').on('click', function() { 
    if ($(this).hasClass('active')) { 
     $(this).find('.hiddencontent').fadeOut(); 
     $(this).removeClass('active'); 
    } else { 
     $('.hiddencontent').fadeOut(); 
     $(this).addClass('active').fadeIn(); 
     $(this).find('.hiddencontent').fadeIn(); 
    } 
}); 

JSfiddle

通过第一个按钮“搜索”我有一个输入框，在其他盒子上的效果是好的。但是当我在这个输入框内点击该框时，我该怎么做才能保持它打开？

Answer 1

$('input[type=search]').on('click', function() { 
     return false; 
    }); 

防止它来自ge拟合隐藏FIDDLE

Answer 2

这是因为输入文本在父亲.button中，其中附有事件。由此，事件也传播到子元素。你可以检查处理程序的目标执行其它code.Like在此之前：

$('.button').on('click', function (e) { 
if($(e.target).is('.button')){ 
    //rest code 
} 
}); 

Working Demo

Answer 3

添加以下代码：

$('.hiddencontent').on('click',function(e){ 
    e.stopImmediatePropagation(); 
}); 

JSFIDDLE

Answer 4

$('.button').on('click', function (e) { 
    if($(e.target).is('.button')){ 
     if ($(this).hasClass('active')) { 
       $(this).find('.hiddencontent').fadeOut(); 
       $(this).removeClass('active'); 
      } else { 
       $('.hiddencontent').fadeOut(); 
       $(this).addClass('active').fadeIn(); 
       $(this).find('.hiddencontent').fadeIn(); 
      } 
    } 

}); 

JSFiddle Link