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

我正在做一个项目，我有一个图像马赛克（每行4个图像），当用户将鼠标悬停在图像上时，它会显示一个侧边栏，其中包含一些内容。

问题是，如果用户悬停在图像1或2上，侧栏在右侧，如果他悬停在图像3或4上，则侧栏在左侧。

我现在正在尝试点击，因为我发现这是最容易做到的。

但在某个时刻，出现了一个错误，侧栏不在右侧。

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

试试下面的片段。

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

$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');
    }
  }
});

/* 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;
}

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