Question

我有一个浮动表，我试图在可见屏幕的右侧放置，而不是点击右边的动画图标。

由于我的分辨率与其他人不同而无法正常工作，因此无法按百分比设置保证金。因此，我试图通过图标的宽度以一种负偏移来调整左侧边距。

我已尝试设置margin-left = 100％然后' - = 56px'但这不起作用。

这就是我明智的JQuery

//This does not work correctly so i have it set the margin-left inline at 88% that works just for me
//$('#quick-notes-quick-menu-icon').css('margin-left', '100%');
//$('#quick-notes-quick-menu-icon').css('margin-left', '-=56px');


$('#quick-notes-quick-menu-icon').click(function(){
    if($('#quick-notes-quick-menu-toggle').is(":visible") == false)
    {
        $('#quick-notes-quick-menu-icon').fadeOut(200);

        $('#quick-notes-quick-menu').animate({
            marginLeft: '60%'   
        }, 500);

        $('#quick-notes-quick-menu-toggle').toggle('slow');
        $('#quick-notes-quick-menu-toggle-btn').toggle('slow');
    }
});

$('#quick-notes-quick-menu-toggle-btn').click(function(){
    $('#quick-notes-quick-menu').animate({
            marginLeft: '100%'  
        }, 500);

    $('#quick-notes-quick-menu-toggle').toggle('slow');
    $('#quick-notes-quick-menu-toggle-btn').toggle('slow');

    $('#quick-notes-quick-menu-icon').fadeIn(200);
});

这是我的Div 请注意它是相对定位的，并且有一个z索引，以便将其浮动到页面的其余部分之上。

<div id='quick-notes-div'>
            <img id='quick-notes-quick-menu-icon' src='../images/quick-notes-menu.png' style='position: fixed; z-index: 1000001;margin-left: 100%; margin-top: 20%;' />
// The margin is set inline here to work with my browser
            <table id='quick-notes-quick-menu' style='position: fixed; z-index: 1000001; margin-left: 88%; background: rgba(112,168,210,0.6); height: 80%'>
            <tr>
                <td style='padding-left: 10px; display: none;' id='quick-notes-quick-menu-toggle'>
                <button style='display: none;' id='quick-notes-quick-menu-toggle-btn' class='ui-state-focus'>x</button>";
// This just populates the rows n whatnot with info from a sql db
                <? include("quick-notes-quick-menu.inc"); ?>
                </td>
            </tr>
            </table>
            </div>

Answer 1

延迟更新：

我能够让它发挥作用。我把它放在另一个div里面的div里面，这就是问题出现的地方。负偏移基于div的宽度/位置。我上了几个div级别给它在整个页面上的位置，而不是将它限制为一个div，我使用z-index将其浮动到上面并且能够将其与边距偏移（因为它们在页面的位置）边距而不是div的。）

JQuery根据像素调整的百分比宽度调整左边距

1 个答案: