在模糊处隐藏div [英] Hide div on blur

问题描述

我有一个jQuery函数，当一个元素被点击时，一个隐藏的div显示。

$ $ p $ $（'。openHide'）。click（function（）{
$（this）.next（' .hiddenContent'）。toggle（）;
}）;


我需要修改它，我可以关闭这个div，如果我点击不只是第一个元件。可能是模糊，但我不知道如何指示元素......

  $（'。hiddenContent'）。blur （）函数（）{
 $（'。hiddenContent'）。parent（）。children（'。hiddenContent'）。hide（）; 
}）; 
  

这是我的HTML：

 < span class =openHide> text here< / span> 
< div style =display：noneclass =hiddenContent> 
隐藏内容
< / div> 
  

解决方案

1. div的跨度应该被切换


2. 在body上单击div应该被隐藏


3. 点击div时，事件不应该是传播到身体



4. 在点击span时，事件不应该传播到body

     $（document）.ready（function（）{
    $（'。openHide'）。click（function（e）{
    $（'.contentContent'）。toggle （）; 
    e.stopPropagation（）; 
   }）; 
    
    $（document.body）.click（function（）{
    $（'。hiddenContent '）.hide（）; 
   }）; 
    
   '（'。hiddenContent'）。click（function（e）{
    e.stopPropagation（）; 
   }）; 
   }）; 
     

I have a jQuery function where when an element is clicked a hidden div shows.

$('.openHide').click(function(){
    $(this).next('.hiddenContent').toggle();
});

I need to modify it s that I could close this div if I click back not just on the first element. Possibly on Blur, but I am not sure how to indicate the element...

$('.hiddenContent').blur(function() {
    $('.hiddenContent').parent().children('.hiddenContent').hide();
});

Here's my HTML:

<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
     hidden content here
</div>

解决方案

1. On the click on the span the div should be toggled
2. On the body click the div should be hidden
3. On the click on the div, the event should not be propagated to the body

4. On the click on the span the event should not be propagated to the body

   $(document).ready(function() {    
      $('.openHide').click(function(e) {
           $('.hiddenContent').toggle();
           e.stopPropagation();
      });
   
      $(document.body).click(function() {
           $('.hiddenContent').hide();
      });
   
      $('.hiddenContent').click(function(e) {
           e.stopPropagation();
      });
   });
   

这篇关于在模糊处隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！