var t
keyAction = function(e) {
return (t = actions[e.keyCode]) && t(e)
}$(document).on("keydown", function(event) {
return actions[event.which] && actions[event.which](event);
});var t
keyAction = function(e) {
return (t = actions[e.keyCode]) && t(e)
}var body = document.body, html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );jQuery.fn.extend({
'offsetBottom' : function() {
var d = $( document ), t = $( this );
return d.height() - t.offset().top - t.height()
},
'offsetRight' : function() {
var d = $( document ), t = $( this );
return d.width() - t.offset().left - t.width()
}
})$( some-element ).offsetBottom().offsetRight()
...
<section data-purpose="sports">
<header>
<p>Here is a header for the sports section.</p>
</header>
<article data-theme="some-theme">
...
</article>
<article data-theme="some-other-theme">
...
</article>
<footer>
<p>That's all, folks!</p>
</footer>
</section>
......
<div class="section">
<div class="section-header">
<p>Here is a header for the sports section.</p>
</div>
<div class="section-article" id="some-theme">
...
</div>
<div class="section-article" id="some-other-theme">
...
</div>
<div class="section-footer">
<p>That's all, folks!</p>
</div>
</div>
....team_arrow, .team_description и .round_blocks я бы полностью заместил этими:...
.team_element .team_arrow {
display: none;
position: relative;
z-index: 2;
left: calc(50% - 30.5px);
}
.team_description {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 12px -7px #000000;
width: 100%;
padding: 20px;
font-size: 14px;
color: #333333;
margin: 0 0 20px;
z-index: 1;
position: relative;
left: -20px;
display: none;
}
.team_element.active .round_block, .round_block:hover {
border: 5px solid #c8dc3d;
border-radius: 115px;
display: block;
height: 220px;
overflow: hidden;
width: 220px;
cursor: pointer;
}
.team_element.active .team_arrow,
.team_element.active .team_description {
display: block;
}
...<div class="teams_block">
<script type="text/javascript">
$(document).ready(function(){
var team_elements = $('.team_element');
$('.team_element').on('click', function(){
team_elements.removeClass('active');
$( this ).addClass('active');
});
});
</script>
<?php foreach ($humans as $human){ ?>
<div class="team_element" data-id='<?= $human->id ?>'>
<div class="round_block">
<img src="/images/<?= $human->image ?>" />
</div>
<div class="title"><?= $human->name ?></div>
<div class="desc"><?= $human->office ?></div>
<img class="team_arrow" width="61" height="24" src="/img/team_arrow.png" />
<div class="team_description"><?= $human->description ?></div>
</div>
<?php } ?>
</div><a> и :focus для них. Но все же существующий вариант более надежен в плане совместимости, хотя бы в отношении планшетиков.
Намного безопасней пользоваться способом №5 из статьи по ссылке. Код получается не такой красивый и лаконичный, зато вы точно знаете, как будет обработан ваш код, ни один браузер не добавит в этом месте никакой отсебятины.