Javascript 如何根据单击的元素的位置使元素显示在右侧或左侧？
我正在做一个项目，我有一个马赛克图像（每行4个图像），当用户将鼠标移到图像上时，它会显示一个包含一些内容的边栏 问题是，如果用户将图像1或2悬停，则侧栏位于右侧，如果用户将图像3或4悬停，则侧栏位于左侧 我现在正在尝试点击，因为我发现这是最容易做到的 但在某一点上，会出现一个bug，并且侧栏不在右侧 这是我的密码： 代码片段中的html是源代码的副本，但我使用php和foreach循环来构建侧栏和图像马赛克 请尝试下面的代码片段 HTML和PHPJavascript 如何根据单击的元素的位置使元素显示在右侧或左侧？,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我正在做一个项目，我有一个马赛克图像（每行4个图像），当用户将鼠标移到图像上时，它会显示一个包含一些内容的边栏 问题是，如果用户将图像1或2悬停，则侧栏位于右侧，如果用户将图像3或4悬停，则侧栏位于左侧 我现在正在尝试点击，因为我发现这是最容易做到的 但在某一点上，会出现一个bug，并且侧栏不在右侧 这是我的密码： 代码片段中的html是源代码的副本，但我使用php和foreach循环来构建侧栏和图像马赛克 请尝试下面的代码片段 HTML和PHP <!-- Side bar -->
<!-- Side bar -->
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<img id="bt_close_sidebar_content" class="bt_close pull-right pointer" src="img/site/bt-close.png" />
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
?>
<div id="membre_<?php echo $equipe['alias']; ?>" class="contenu_sidebar">
<h2><?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?></h2>
<h3><?php echo nl2br(htmlspecialchars($equipe['fonction'], ENT_QUOTES, 'UTF-8')) ?></h3>
<p><?php echo $equipe['texte']; ?></p>
</div>
<?php
$i ++;
endforeach;
reset($allDatasEquipe);
?>
</div>
</div><!-- fin sidebar_content_right -->
<!-- Images -->
<div class="container container_agence">
<div class="row mosaique_equipe">
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
if ($i == 1 || $i == 2) {
$class = 'sidebar_left';
} else {
$class = 'sidebar_right';
}
?>
<div class="col-md-3 col-lg-3">
<div id="<?php echo $equipe['alias']; ?>" class="img_mosaique_equipe toggle-sidebar pointer <?php echo $class; ?>">
<img src="img/equipe/<?php echo nl2br(htmlspecialchars($equipe['image'], ENT_QUOTES, 'UTF-8')) ?>" alt="<?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?>"/>
</div>
</div>
<?php
$i ++;
if ($i > 4) {
$i = 1;
}
endforeach;
reset($allDatasEquipe);
?>
</div>
</div>
/*侧栏内容*/
#边栏内容{
宽度：50%；
位置：固定；
右边框：1px实心#4c565c；
/*右图：-50%*/
右：-1000px；
排名：0；
身高：100%；
溢出：自动；
背景：黑色；
z指数：1000；
背景色：#999；
文本对齐：左对齐；
}
.contenu_侧边栏{
显示：无；
}
.sidebar\u内容\u包装{
位置：相对位置；
身高：100%；
溢出：自动；
填充：115px 50px 50px 50px；
}
.图像{
宽度：30px；
高度：30px；
背景色：红色；
边缘底部：5px；
}
bt close
正文
正文
正文
正文
正文
正文
正文
正文
<html>
<head>
<style>
.my-image {
display: inline-block;
background-color: #0f0;
with: 96px;
height: 72px;
margin: 1px;
}
.my-popup {
position: absolute; display: inline-block; z-index: 1000; background-color: red; with: 48px; height: 48px;
}
</style>
</head>
<body>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<script src="jquery.js"></script>
<script>
(function ($) {
var toDisplay = $('<div class="my-popup">Hey whats up</div>')
.appendTo($('body'))
.hide(0);
var images = $('.my-image');
$.each(images, function (index, el) {
var displayPos = calculatePosition(el, index >= images.length / 2);
var $el = $(el);
$el.on('mouseover', function () {
toDisplay.show(0).offset(displayPos);
});
$el.on('mouseout', function () {
toDisplay.hide(0);
});
});
function calculatePosition (image, right) {
var $image = $(image);
var pos = $image.offset(); // image position relative to document
if (right) {
pos.left -= toDisplay.width();
} else {
pos.left += $image.width();
}
return pos;
}
})(window.jQuery);
</script>
</body>
</html>
.我的形象{
显示：内联块；
背景色：#0f0；
与：96px；
高度：72px；
保证金：1px；
}
.我的弹出窗口{
位置：绝对；显示：内联块；z索引：1000；背景色：红色；带：48px；高度：48px；
}
洛雷姆·伊普苏姆和他的剧本
洛雷姆·伊普苏姆和他的剧本
洛雷姆·伊普苏姆和他的剧本
洛雷姆·伊普苏姆和他的剧本
（函数（$）{
var toDisplay=$（“嘿，怎么了”）
.appendTo（$（'body'））
.隐藏（0）；
var images=$（'.my image'）；
$。每个（图像、函数（索引、el）{
var displayPos=计算位置（el，索引>=images.length/2）；
变量$el=$（el）；
$el.on（'mouseover'，函数（）{
显示（0）偏移量（显示位置）；
});
$el.on（'mouseout'，函数（）{
toDisplay.hide（0）；
});
});
函数计算位置（右图）{
var$image=$（图像）；
var pos=$image.offset（）；//相对于文档的图像位置
如果（右）{
pos.left-=toDisplay.width（）；
}否则{
pos.left+=$image.width（）；
}
返回pos；
}
})（window.jQuery）；