我正在尝试制作容器，当我单击 div1 的元素时，div1 的焦点和 div1 高度增加，当 div1 的元素未聚焦或非焦点时，div1 高度返回以前的样式。我在这里做了一个片段，但它不起作用。请有人帮我我该怎么做？我正在使用 jquery 框架..
$(document).ready(function() {
$(".two").focus(function() {
$(".one").css({
'height': '400px',
'-webkit-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
'-moz-box-shadow': '2px 2px 5px 2px rgba(0,0,0,0.75)',
'box-shadow': '2px 2px 5px 3px rgba(0,0,0,0.75)'
});
});
}); .one {
background-color: #f2c133;
border: 3px solid #ccc;
width: 200px;
height: 50px;
}
.two {
width: 80px;
height: 30px;
background-color: #a1b2c3;
color: #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0" class="one">
<div class="two">
click me
</div>
</div>最佳答案
$(document).ready(function() {
$(".two").focus(function() {
$(".one").addClass('isfocus');
$(".one").focus(function() {
$(".one").addClass('isfocus');
});
});
$(".one").focusout(function() {
$(".one").removeClass('isfocus');
});
$(".root").focus(function() {
$(".one").removeClass('isfocus');
$(".one").unbind();
});
});.one {
background-color: #f2c133;
border: 3px solid #ccc;
width: 200px;
height: 50px;
}
.two {
width: 80px;
height: 30px;
background-color: #a1b2c3;
color: #000;
}
.isfocus {
height: 300px;
-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.75);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body><div tabindex="4" class="root">
<div tabindex="3" class="one">
<div tabindex="2" class="two">
click me
</div>
</div>
</div>
</body>
</html>关于javascript - 用js聚焦和取消聚焦div的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33719817/