Question

可能重复：
horizontal menu adding divs dynamically

我想要做的是在每个水平滑出的滑动面板之间动态添加div。

我有条件（语句），它在mouseenter函数上发表了评论。将div.spacer定位在每个div.container之间是有意义的，但每次你输入一个菜单项时它都会改变，如果可以的话请有人纠正这个，这里是jsFiddle上的工作样本我已经在这里找到了它在jsFiddle 上 JavaScript的：

$(document).ready(function () {
        function init() {
            $('#menu').css({ 'width': $('.container:first').width(), 'height': $('.container:first').height() });
        }
        init();
        $('.menu-item').mouseover(function () {
            var curr = $(this).closest('.container');
            var next = curr.next('.container');
            var index = curr.index() + 1

            $(this).addClass('menuitem-over');

            if (curr.index() == $('.container').length - 1) return;

            $('#menu').animate({ 'width': curr.position().left + curr.width() + 5 + next.width() - $('#menu').position().left })
            .find('.container:nth-child(' + index + ')').nextAll()
            .animate({ 'left': curr.position().left + curr.width() + 5 })
            /* this condition works except for positioning the divs.spacer correctly */
            if ($('#spacer' + curr.index()).length > 0) {
                return
            } else {
                $('#menu').append(
                    $('<div id="spacer' + curr.index() + '" class="spacer"></div>').css({'left': curr.position().left + curr.width()})
                    )
            }

        }).mouseleave(function () {
            $(this).removeClass('menuitem-over');
        });
    });

CSS：

.spacer
    {
        background-color:Red; width:5px; height:200px; position:absolute; z-index:1000;; float:left
    }
    .menuitem-over 
    {
        background-color:Orange;
    }

HTML：

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="menu" style="background-color:Black">
                <div class="container" id="1" style="width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua; opacity:.5">
                    <div class="menu-item">Menu Item 1</div>
                    <div class="menu-item">Menu Item 2</div>
                    <div class="menu-item">Menu Item 3</div>
                </div>
                <div class="container" id="2" style="width:200px; height:300px; z-index:998; position:absolute; background-color:Blue; opacity:.5">
                    <div class="menu-item">Menu Item 4</div>
                    <div class="menu-item">Menu Item 5</div>
                    <div class="menu-item">Menu Item 6</div>
                </div>
                <div class="container" id="3" style="width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia; opacity:.5">
                    <div class="menu-item">Menu Item 7</div>
                    <div class="menu-item">Menu Item 8</div>
                    <div class="menu-item">Menu Item 9</div>
                </div>
                <div class="container" id="4" style="width:200px; height:500px; z-index:996; position:absolute; background-color:Green; opacity:.5">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
                <div class="container" id="5" style="width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; opacity:.5">
                    <div class="menu-item">Menu Item 10</div>
                    <div class="menu-item">Menu Item 11</div>
                    <div class="menu-item">Menu Item 12</div>
                </div>
            </div>
        </td>
    </tr>
</table>

在mouseenter上动态定位div

0 个答案: