Question

我正在开展一个项目，我有一个图像拼接（每行4个图像），当用户将鼠标悬停在图像上时，它会显示一个侧边栏，里面有一些内容。

问题是，如果用户悬停图像1或2，侧边栏位于右侧，如果他悬停图像3或4，侧边栏位于左侧。

我正在尝试点击，因为我觉得最容易做到。

但是在某个时刻，会出现一个错误并且侧栏不在右侧。

这是我的代码：代码段中的html是源代码的副本，但我使用php和foreach循环来构建侧边栏和图像拼接。

试试下面的代码段。

HTML＆amp; PHP

<!-- 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>

JS / jQuery

＆＃13;

$sidebar_content = $('#sidebar_content');

$('.images').click(function() {

  var id = $(this).attr('id');
  console.log('id : ' + id);

  var position_sidebar = $('.contenu_sidebar').hasClass('sidebar_left');

  if ($sidebar_content.hasClass('visible')) {
    if ($(this).hasClass('sidebar_left')) {
      $('#sidebar_content').css({
        "text-align": "left",
        "right": "0"
      });
      $sidebar_content.animate({
        "right": "-1000px"
      }, "slow").removeClass('visible');
      console.log('sidebar_left closed');
      position_sidebar_content = 'right';
    } else if ($(this).hasClass('sidebar_right')) {
      $('#sidebar_content').css({
        "text-align": "right",
        "right": "0"
      });
      $('#sidebar_content').css({
        "left": "0"
      });
      $sidebar_content.animate({
        "left": "-1000px"
      }, "slow").removeClass('visible');
      position_sidebar_content = 'left';
      console.log('sidebar_right closed');
    }
  } else {
    if ($(this).hasClass('sidebar_left')) {
      $('#sidebar_content').css({
        "right": "-1000px"
      });
      position_sidebar_content = 'right';
      $sidebar_content.animate({
        "right": "0px"
      }, "slow").addClass('visible');
      console.log('sidebar_left open');
    } else if ($(this).hasClass('sidebar_right')) {
      $('#sidebar_content').css({
        "left": "-1000px"
      });
      position_sidebar_content = 'left';
      $sidebar_content.animate({
        "left": "0px"
      }, "slow").addClass('visible');
      console.log('sidebar_right open');
    }
  }
});

＆＃13;

/* side bar content */

#sidebar_content {
  width: 50%;
  position: fixed;
  border-right: 1px solid #4c565c;
  /*    right: -50%;*/
  right: -1000px;
  top: 0;
  height: 100%;
  overflow: auto;
  background: black;
  z-index: 1000;
  background-color: #999;
  text-align: left;
}
.contenu_sidebar {
  display: none;
}
.sidebar_content_wrapper {
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 115px 50px 50px 50px;
}
.images {
  width: 30px;
  height: 30px;
  background-color: red;
  margin-bottom: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="1" class="images sidebar_left"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="2" class="images sidebar_left"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="3" class="images sidebar_right"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="4" class="images sidebar_right"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="5" class="images sidebar_left"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="6" class="images sidebar_left"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="7" class="images sidebar_right"></div>
    </div>

    <div class="col-sm-3 col-md-3 col-lg-3">
      <div id="8" class="images sidebar_right"></div>
    </div>
  </div>

  <div id="sidebar_content">
    <div class="sidebar_content_wrapper">
      <p id="bt_close_sidebar_content" class="bt_close pull-right pointer">bt close </p>
      <div id="membre_1" class="contenu_sidebar">
        <p>text</p>
      </div>

      <div id="membre_2" class="contenu_sidebar">
        <p>text</p>
      </div>

      <div id="membre_3" class="contenu_sidebar">
        <p>text</p>
      </div>

      <div id="membre_4" class="contenu_sidebar">
        <p>text</p>
      </div>
      
      <div id="membre_5" class="contenu_sidebar">
        <p>text</p>
      </div>
      
      <div id="membre_6" class="contenu_sidebar">
        <p>text</p>
      </div>
      
      <div id="membre_7" class="contenu_sidebar">
        <p>text</p>
      </div>
      
      <div id="membre_8" class="contenu_sidebar">
        <p>text</p>
      </div>

    </div>
  </div>

＆＃13;

Answer 1

我没有尝试你的代码，但我认为下面的例子显示了一种做你需要的方法。

<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>

我们的想法是将显示元素位置设置为绝对值，并计算每个悬停事件的新坐标，并使用jquery设置它们。

如何根据单击元素的位置使元素显示在右侧或左侧？

1 个答案: