如何使用 jquery 或 css 定位另一个 div答案

【问题标题】：how to i target a another div with jquery or css如何使用 jquery 或 css 定位另一个 div
【发布时间】：2014-11-24 11:59:35
【问题描述】：

我有三个不同的 div 红色、蓝色、绿色和黄色。红色包含一个输入框。如果点击红色的输入框（焦点），我试图隐藏黄色

HTML

<div class="red">
    <form>
        <input class="s" placeholder="Search">
    </form>
</div>
<div class="blue"> blue </div>
<div class="green"> green </div>
<div class="yellow"> yellow </div>

CSS

.red, .blue, .green, .yellow
{
    padding: 10px;
    border: 1px solid #f00;
}

.red{
    background: red;
}

.blue{
    background: blue;
}

.green{
    background: green;
}

.yellow{
    background: yellow;
}

.s:focus{
    border: 1px solid black;
}

.s:focus + yellow{
    display: none;
}

Fiddle Here

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

用 jquery 很容易做到；

(function() {
    $('.red input').on({
        click: function() { // maybe you'd prefer on focus?
            $('.yellow').fadeOut();
        }
    })
})();

【讨论】：

【解决方案2】：

试试这个

$(function(){

   $(".s").on("focus",function()
   {
        $(".yellow").hide();
   });
   $(".s").on("blur",function()
   {
        $(".yellow").show();
   });

});

.red, .blue, .green, .yellow
{
    padding: 10px;
    border: 1px solid #f00;
}
.red{
    background: red;
}
.blue{
    background: blue;
}
.green{
    background: green;
}
.yellow{
    background: yellow;
}
.s:focus{
    border: 1px solid black;
}
.s:focus + yellow{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
<input class="s" placeholder="Search">
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>

【讨论】：

【解决方案3】：

其他答案将起作用。如果您愿意，这是一个小提琴形式。

$(document).ready(function() {
    $(".red input").focus(function() {
        $(".yellow").hide();
    });
});

http://jsfiddle.net/8acwjf3o/1/

【讨论】：

【解决方案4】：

您必须为此使用 jQuery .focus() 函数

$( "#search" ).focus(function() {
    $( ".yellow" ).hide();
});

看到这个fiddle

【讨论】：

【解决方案5】：

CSS 中的 + 选择器仅适用于相邻元素。在这种情况下，您需要使用 javascript。 JQuery 让它变得特别简单：

$('.s').focus(function() {
   $('.yellow').hide(); 
}). blur(function() {
    $('.yellow').show();
});

这是修改后的 JSFiddle：http://jsfiddle.net/w10cw8tc/

$(function(){
    $('.s').focus(function() {
        $('.yellow').hide(); 
    }). blur(function() {
        $('.yellow').show();
    });
});

.red, .blue, .green, .yellow {
    padding: 10px;
    border: 1px solid #f00;
}
.red{
    background: red;
}
.blue{
    background: blue;
}
.green{
    background: green;
}
.yellow{
    background: yellow;
}
.s:focus{
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red">
<form>
    <input class="s" placeholder="Search" />
</form>
</div>
<div class="blue"> top </div>
<div class="green"> middle </div>
<div class="yellow"> bottom </div>

【讨论】：

【解决方案6】：

使用 jQuery：

$('#search').on('focus', function () {
    $('#yellow').hide('fast');
});

    .colored {
        padding: 10px;
        border: 1px solid #f00;
    }
    #red {
        background: red;
    }
    #blue {
        background: blue;
    }
    #green {
        background: green;
    }
    #yellow {
        background: yellow;
    }
    .s:focus {
        border: 1px solid black;
    }
    .s:focus + yellow {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colored" id="red">
    <form>
        <input id="search" placeholder="Search" />
    </form>
</div>
<div class="colored" id="blue">blue</div>
<div class="colored" id="green">green</div>
<div class="colored" id="yellow">yellow</div>

【讨论】：

【解决方案7】：

在你的 CSS 中

.s:focus + yellow{
    display: none;
}

这种风格有几个问题，首先是你缺少“。”的错字。在“黄色”类名之前进行选择。第二;由于“input.s”元素旁边没有“.yellow”元素，因此永远不会应用此样式。 CSS 中没有定义反向子到父选择器（还没有！）。

var input = document.querySelectorAll(".s")[0];
input.addEventListener("focus", function () {
    var yellow = document.querySelectorAll(".yellow")[0];
    yellow.style.display = "none";
});

或jQuery方式：

$(".s").focus(function () {
    $(".yellow").hide();//You can use .hide() or .fadeOut() or .slideUp() or .slideDown() methods.
});

【讨论】：