水平菜单动态添加div [英] horizontal menu adding divs dynamically

问题描述

您好，我想在我的滑动面板之间添加红色的div.当您进入菜单项并且面板滑出时，我的菜单会设置动画，但是我想在每个面板之间动态添加/删除面板.当我说删除时，我的意思是当您向后浏览菜单而滑动面板缩回时，您将删除最后一个红色的div，然后当您鼠标进入菜单项并滑动面板扩展时，您将添加一个红色的div(5像素宽无关紧要高度)是我到目前为止所拥有的. jsFiddle

Hi im trying to add divs that are red between my sliding panels . My menu animates when you moueenter the menu item and a panel slides out, but between each panel i want to add/remove a panel dymaically. when i say remove i mean when you go backwards through the menu and the sliding panel retracts you then remove the last red div and when you mouseenter a menu item and the sliding panels exapand you add one red div(5px wide doesn't matter about the height) here is what i have so far. jsFiddle

    $(document).ready(function () {
        $('.menu-item').mouseenter(function () {
            var curr = $(this).closest('.container');
            var next = curr.next('.container');

            next.animate({ 'left': curr.position().left + curr.width() + 5 });

            if(curr.index() < ($('.container').length - 1)){
                here i need to add and remove a </div class="spacer"></div> to the right side
                of the current(var curr) div
            }

            var $index = curr.index() + 1;
            $('.container:nth-child(' + $index + ')').nextAll().each(function () {

                $(this).animate({ 'left': curr.position().left + curr.width() + 5 });

            });

        });
    });

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

<table border="2" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="menu" style="background-color:Black; width:2000px; height:300px;top:5px; left:50px  ">
                <div class="container" id="1" style="left:0; width:200px; height:220px; z-index:999; position:absolute; background-color:Aqua">
                    <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="left:0; width:200px; height:300px; z-index:998; position:absolute; background-color:Blue">
                    <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="left:0; width:200px; height:400px; z-index:997; position:absolute; background-color:Fuchsia">
                    <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="left:0; width:200px; height:500px; z-index:996; position:absolute; background-color:Green; float:left">
                    <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="left:0; width:200px; height:600px; z-index:995; position:absolute; background-color:Lime; float:left">
                    <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>

推荐答案

在这里...如果这样还不错，请不要犹豫，但请看这里:演示

Here... not shure if this is good but look here: DEMO

E D I T

下面是另一种解决方案: DEMO2

Well here is another solution: DEMO2

这篇关于水平菜单动态添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！