Question

我有一个Div，其中有很多其他元素（为了便于使用内联样式理解）

<div id="MainItemList" style="width:300px; height:50px;">
     <h4>This is a long content div</h4>
     <ul> <-- A Long List of Li --> </ul> 
     <p>Click on an list item</p>
     <other divs>...
</div>

然后有一系列动态的其他div，我想让我的 MainItemList div位于我点击的任何div下方。像

<div id="DynamicDivs">
   <div id="Dyn1"></div>
   <div id="Dyn2"></div>
   <div id="Dyn3"></div>
   <div id="Dyn4"></div> //And so one
</div>

所以，现在当我点击Dyn1时，我的 MainItemList div应该放在Dyn1 div之下。我用Jquery尝试过像

这样的东西

var MainListDiv = '<div id="MinItemList"'>...A lot of Elements..</div>;

$(document).on('click','#DynamicDivs div', function()
{
    $(this).append(MainListDiv);
});

$(document).on('onmouseout','#DynamicDivs div', function()
{
    //Check and remove
    $('#MainListDiv').remove();
});

但是这样每次用户点击这样的div时，都会运行一个长代码来向其中添加大量内容并在用户移出时将其删除。在个人电脑上这不是一个大问题，但在移动设备上它变得非常缓慢，这使得一切变得越来越糟。

这样做的诀窍是什么？我让上面的代码运行了1个月，现在当用户抱怨时，这是一个令人头痛的问题。

实际上有一个用户单击的某种图片和图标的列表，然后该项目被附加到动态div， MainListItem 必须位于Dynamic div之下，以便用户点击并删除从那里开始。

在我的JQuery代码中，每次创建和删除div。 MainItemList div是在页面加载时创建的并且是永久性的（在页面加载时创建一次但隐藏）因此它必须变得可见并在任何div用户下移动并在mouseout时隐藏？还有一件让事情变得更糟的事情是当页面滚动时，移动重要的动态Div :(

Answer 1

如您所知，取消隐藏#MainListItem并在悬停的div旁边给它一个固定的位置应该可以解决问题，小心提供正确的“顶部”值。复杂的部分是确定正确的“顶部”值是多少。单独使用您的示例，即：dynamic-div的顶部+动态div的高度+上面的任何边距/其他间距。

这是实现它的代码（我包含了一个基本的淡入淡出，因此它更加无缝）：

var marginOffset = 0;
$(document).ready(function(){
    marginOffset = $('#DynamicDivs').offset().top;
    $('#DynamicDivs div').mouseover(function(){
        $('#MainItemList').css({ position: 'fixed', top: $(this).position().top + $(this).height() + marginOffset}).stop(false, true).fadeIn('fast');
    }).mouseleave(function(){
        $('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
    });
});

我没有在多个移动设备上测试过，所以请进行适当的测试。但是，与附加的html方法相比，这种方法对移动设备的负担要小得多。

此外，这只会通过滚动来处理弹出窗口。如果您希望弹出列表在消失之前被延迟，或者如果您有一些复杂的边距，则必须相应地修改代码。

JS小提琴示例：http://jsfiddle.net/wXKfv/10/

编辑：在评论中进一步讨论之后，这里是解决特定问题的Javascript：

$(document).ready(function(){
    $('#DynamicDivs div').mouseover(function(){
        $('#MainItemList').css({ position: 'absolute', top: $(this).position().top + $(this).height()}).stop(false, true).fadeIn('fast');
    }).mouseleave(function(){
        $('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
    });
});

JS小提琴示例：http://jsfiddle.net/wXKfv/11/

Answer 2

你的做法是错误的。将MainItemList和DynamicDivs放入单独的div中。相反，如果追加到现有的div尝试替换MainListDiv。或者在append（）

之前放一个.empty（）

-OR -

假设您通过ajax加载MainListDiv：

将MainListDiv加载到正文并隐藏它。
关于“DynamicDivs div”的点击事件，在DynamicDivs下使用jquery和css定位div

移动一个div以放在其他div上点击其他div

2 个答案: