保持< div>和它的孩子在焦点，直到注意< div> [英] Keep <div> and its children in focus until focus out of <div>

问题描述

我曾经看过类似的话题，但我的情况略有不同。我试图让我的父母的DIV（和孩子）的焦点，直到我专注于div，这似乎令人惊讶地很难完成。

这个解决方案我认为可以，但它只是看起来适用于兄弟元素而不是实际的div本身。

下面是我试图做的演示 http://jsfiddle.net/nosfan1019/9Eg3k/3/ 。我需要它，所以你可以点击灰色的部分，而不是消失。

解决方案

好的，我想这就是你想要的：

演示： http://jsfiddle.net/SO_AMK/GNfzw/

HTML：

 < div> 
< input type ='text'> 
< span>< / span> 
< / div> 
 
< div> 
< input type ='text'> 
< span>< / span> 
< / div> 
 
< div> 
< input type ='text'> 
< span>< / span> 
< / div> 
  

CSS：

  div {
 margin：20px; 
 padding：10px; 
 outline：0; 
 
 $ / code> 

jQuery：

<$ （）{$ b $（'div input'）。parent（）。attr（tabindex， - 1）.focus（function（）{
$（this）.css（'background'，'＃eee'）;
$（this）.find（'span'）。text（'triggered'）;

$（this）.focusout（function（）{
$（this）.children（'span'）。empty（）;
$（this）.css（'background'，'white'） ;

））;

}）;
$（'div input'）。focus（function（）{
$（this）。 parent（）。css（'background'，'＃eee'）;
$（this）.siblings（'span'）。text（'triggered'）;

$（this ）.parent（）。focusout（function（）{
$（this）.children（'span'）。empty（）;
$（this）.css（'background'，'white' ）;

}）;

}）;

}）;


高效但似乎有效。

I've seen similar topics posted on SO but mine is slightly different. I'm trying to keep my parent DIV (and children) in focus until I focus out of the div, and it seems surprisingly hard to accomplish.

This solution I thought would work but it looks to only applies to sibling elements and not the actual div itself.

Here's a demo of what I'm trying to do http://jsfiddle.net/nosfan1019/9Eg3k/3/. I need it so you can click on the gray portion and not have it disappear.

解决方案

Okay, I think that this is what you want:

Demo: http://jsfiddle.net/SO_AMK/GNfzw/

HTML:

<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>

<div>
    <input type='text'>
    <span></span>
</div>

CSS:

div {
    margin: 20px;
    padding: 10px;
    outline: 0;
}

jQuery:

$(function() {
    $('div input').parent().attr("tabindex",-1).focus( function() {
        $(this).css('background','#eee');
        $(this).find('span').text(' triggered');

        $(this).focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','white');

        });            

   });
    $('div input').focus( function() {
        $(this).parent().css('background','#eee');
        $(this).siblings('span').text(' triggered');

        $(this).parent().focusout(function() {
            $(this).children('span').empty();
            $(this).css('background','white');

        });            

   });

});

​

It could probably be more efficient but it seems to work.

这篇关于保持< div>和它的孩子在焦点，直到注意< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！