如何根據單擊元素的位置使元素顯示在右側或左側？

Question

我正在一個項目中，我有一個圖像馬賽克（每行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> 

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進行設置。