个人中心
gpt4 book ai didi

jquery - 当使用 jquery 或 javascript 动态移动另一个 div 时，如何防止 div 移动？

转载 作者：太空宇宙 更新时间：2023-11-04 03:41:10 25 4
gpt4 key购买 nike

当我单击此页面上的菜单时 http://jsfiddle.net/3D8Sn/菜单通过上下移动来动画。问题是，菜单右侧的 div 也会随着菜单一起移动。我如何防止这种情况并使 div 保持在一个位置？

HTML:

<body>
    <div id="container">
        <div id="titlebar">
            <p id="applicationTitle">PageTitle</p>
            <div id="logoutLinkDiv">
                <a id="logoutLink" href="index.html" style="color:#5E5E5E">Logout</a>
            </div>

        </div> 
        <div id="accordionMenu">
            <ul>
                <li>
                    <h3><span class="icon-home"></span>Menu1</h3>
                    <ul>
                        <li><a href="#">Menu1</a></li>
                    </ul>
                </li>
                <!-- we will keep this LI open by default -->
                <li class="active">
                    <h3><span class="icon-dashboard"></span>Menu2</h3>
                    <ul>
                        <li><a href="#">Menu2</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-trap"></span>Menu3</h3>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">6</a></li>
                    </ul>
                </li>
                <li>
                    <h3><span class="icon-performance"></span>Menu4</h3>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                </li>
            </ul>
        </div> 

    </div> 


    <div id="theGrid"  style = "position: absolute;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
                <input value="Remove Filter" id="clearfilteringbutton" type="button" />
                <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
                <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>        


</body>

CSS:

/**** Basic reset ****/
* {margin: 0; padding: 0;}

body 
{
    background: #BCED91; /*** background of entire page ***/
    font-family: arial, verdana;
}

/**** The Entire Menu ****/
#accordionMenu 
{
    background: #292929;
    width: 175px;
    margin-top: 30px;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: 0px;
    color: #CCCCCC; /*main menu font color*/
    /**** Some cool shadow and glow effect ****/
    /*box-shadow: 
        0 5px 15px 1px rgba(0, 0, 0, 0.6), 
        0 0 200px 1px rgba(209, 209, 209, 0.5);*/
}

/******** Main Menu Button styles ********/
#accordionMenu h3 
{
    font-size: 11px;
    font-color: #D1D1D1;
    line-height: 30px;
    padding: 0 5px;
    cursor: pointer;
    border-style: solid;
    border-width: 0.5px;    
    border-color: #141414;
    letter-spacing: 1px;

    /*fallback for browsers not supporting gradients*/
    background: #0A0A0A; 
    /*background: linear-gradient(#242424, #0A0A0A);*/
}

/********* Menu hover effect - NO USE HERE
#accordionMenu h3:hover 
{
        text-shadow: 0 0 1px rgba(255, 0, 0, 0.7);
}
*********/

/********* iconfont styles *********/
#accordionMenu h3 span 
{
    font-size: 16px;
    margin-right: 10px;
}

/***** list items *****/
#accordionMenu li 
{
    list-style-type: none;
}

/***** links *****/
#accordionMenu ul ul li a 
{
    color: #CCCCCC; /*submenu font color*/
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 27px;
    display: block;
    padding: 0 20px;

    /**** transition for smooth hover animation ****/
    transition: all 0.15s;
}

/*hover effect on links*/
#accordionMenu ul ul li a:hover 
{
    color: #121212; /*submenu hover font color*/
    background: #FFB300; /* submenu hover background colour */
    border-left: 0px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
#accordionMenu ul ul 
{
    display: none;
}
#accordionMenu li.active ul 
{
    display: block;
}
#titlebar { 
    white-space: nowrap;
    width: 100%;
    height:40px;
    margin-top: 0px;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: 0px;
    left:0px;
    right:0px;
    background: #0A0A0A;
    box-shadow: 
        0 5px 15px 1px rgba(0, 0, 0, 0.6), 
        0 0 200px 1px rgba(209, 209, 209, 0.5);    
}
#applicationTitle {
    margin-bottom: 5px;
    margin-top: -20px;
    margin-right: 5px;
    margin-left: 150px;
    position: absolute;
    color:#5E5E5E;
    text-decoration:none; 
    font-size: 12px; 
    letter-spacing: 3px;
    /*text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);*/
}

#logoutLink
{
    position: fixed;
    left: 97%;
    top: 13px;  
    right: 50px;
    text-decoration:none;
    font-size: 10px;
    letter-spacing: 1px;  
}
a.logoutLinkDiv:link 
{
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 5px;
}
#theGrid
{
    font-size: 13px; 
    font-family: Verdana; 
    /*float: left;*/
    margin-bottom: 5px;
    margin-top: -160px;
    margin-right: 5px;
    margin-left: 250px;
}

Javascript:

/*jQuery time*/
$(document).ready(function()
{
    $("#accordionMenu h3").click(function()
    {
        //slide up all the link lists
        $("#accordionMenu ul ul").slideUp(200);
        //slide down the link list below the h3 clicked - only if its closed
        if (!$(this).next().is(":visible"))
        {
            $(this).next().slideDown(200);
        }
    });
});

最佳答案

从 #theGrid 中移除边距并向其添加位置:

 left: 300px;
 top: 100px;

fiddle 链接:http://jsfiddle.net/3D8Sn/4/

关于jquery - 当使用 jquery 或 javascript 动态移动另一个 div 时，如何防止 div 移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24881847/

25 4 0
文章推荐： c++ - 为什么 CORBA run() 取决于挂钟？
文章推荐： Python，如何合并 2 个 pandas DataFrame
文章推荐： c - 在递归调用中给出指针参数
文章推荐： linux - "sudo ./xampp-linux-x64-5.6.3-0-installer.run"有什么作用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com