JQuery根据像素调整百分比宽度调整Margin-Left答案

【问题标题】：JQuery Adjusting Margin-Left based on Pixel Adjusted Percentage WidthJQuery根据像素调整百分比宽度调整Margin-Left
【发布时间】：2017-06-13 07:23:33
【问题描述】：

我有一个浮动表格，我试图将其定位在可见屏幕的右侧，而不是单击它从右侧动画显示的图标时。

我无法按百分比设置边距，因为我的分辨率与其他人不同，并且无法正常工作。所以我试图通过图标的宽度以一种负偏移量从侧面调整左边距。

我尝试设置 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>

【问题讨论】：

恕我直言，如果您创建了一个更有针对性的问题，您会得到更好的服务。最好的 SO 问题是其他人可能也觉得有用的问题。尝试在不使用 PHP 的情况下重新创建它并将其放在小提琴中，以便其他人可以修改它。当你在做的时候，学会在没有表格和内联样式的情况下重写它。 ;)
这是有道理的，我试图将代码减少到所需的最低限度。我将对其进行更多修剪并将问题分开，以便更专注于我所看到的/可能重新措辞的个别问题。感谢您的反馈！

标签： javascript jquery html css

【解决方案1】：

后期更新：

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

【讨论】：