Javascript 在单击其他div时，移动一个div以放置在其他div旁边

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

这是一个很长的内容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下面

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();
});

---

var MainListDiv=”您的方法是错误的。将MainItemList和DynamicDiv放入单独的div中。如果附加到现有div，请尝试替换MainListDiv。或者将.empty（）放在append（）之前

-或-

假设您正在通过ajax加载MainListDiv：

将MainListDiv加载到主体并隐藏它
单击“DynamicDivs div”的事件，将带有jquery和css的div定位在DynamicDivs下
如您所知，取消隐藏#MainListItem并在悬停div旁边给它一个固定位置应该可以做到这一点，注意提供正确的“top”值。复杂的部分是计算正确的“顶部”值。仅以您的示例为例，即：动态div的顶部+动态div的高度+上面的任何边距/其他间距

下面是实现这一点的代码（我包括了一个基本的淡入淡出，所以它更加无缝）：

我还没有在多个移动设备上测试过这一点，所以请进行您应得的测试。然而，与附加html方法相比，这种方法在移动设备上的开销应该要小得多

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

JS小提琴示例：

编辑：
在评论中进一步讨论后，下面是解决特定问题的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小提琴示例：
至少对我来说，很难理解这个想法视觉上隐藏元素通常是个好主意，而不是破坏性地扔掉某些东西，然后再把它带回来我认为你必须问自己的问题是：“代码可以在页面加载时加载吗？”因为我确实不知道。如果可以，您只需使用css
#MinItemList{display:none；}
隐藏该元素组的父元素，并将jquery
.append（）
替换为
.show（）
，将
.remove（）
替换为
.hide（）
@Joonas您所说的内容与我目前所做的内容相同。唯一的区别是它将隐藏而不是删除，但每次用户单击div时它都必须追加。另一件事是，代码不能被加载，正如我所说的，有一系列动态的div意味着div是动态创建的。这不一样，因为在这种想法中，代码在页面加载时生成一次你是说div是动态创建的，是的，我明白了，但是它们需要动态创建吗？div内容是基于单击哪个元素生成的？还是什么？@Joonas YES div需要在非正常情况下动态生成。div内容不是基于任何内容生成的，而是动态div已经从服务器加载了很多内容。关于页面加载中加载的代码，我在上一段中已经说过，请看后面的“是否会有…”为什么在你已经知道答案的情况下还要问这些问题“有没有办法让这个MainItemList div永久化。”好吧，正如你告诉我的：“是的，div需要在非正常的情况下动态生成。”| |这并没有留下多少回旋余地，我希望你意识到这一点。如果需要在单击时创建内容，则不能在页面加载时创建内容。就这么简单。当然，如果这些元素中只有一些东西是在单击时生成的，那么您可以在页面加载时生成主结构，并在单击时填充空格。这正是选项2的问题所在。看看Anuradha，假设我在页面加载时创建了一个MainItemList div，它被diffault隐藏。然后制作一个ajax，并从服务器检索几个div。现在，我如何使用（Jquery或CSS）将MainItemList div放置在我单击的任何div（它们是ajaxed）的正下方？这里的放置指的是浮动div或其他方法？如果是浮动div：您可能想看看jquery position（）和offset（），您是否尝试将empty（）添加到代码中$（this.empty（）.append（MainListDiv）；是的，作为一个浮动div。我试着用Jquery定位它，但问题是，正如我在问题中所说的，如果div是浮动的，单击div，它归结为动态创建的div，但当用户滚动页面时，浮动div保持在原来的位置，而动态创建的div则随着滚动移动，那么在窗口滚动事件上应用相同的定位功能如何？这就是工具提示插件的工作原理。请检查Daniel的答案，这正是我想要的。他给了JSFIDLE alsoThanks Daniel，但问题是，当我们滚动时，动态创建的div也随之滚动，这意味着它就像JSFIDLE中的文本内容一样，随着滚动而移动，这是我在问题中所说的最糟糕的问题。无论如何，谢谢你的支持。啊，我误解了。。。你提到了divs滚动，这很重要。我不知道他们停止滚动很重要。尽管在JSFiddle示例中，这一点很容易改变。看看：这更接近你想要的吗？如果没有，请让我再次知道你需要什么，但更具体。我们不清楚你想要什么样的行为。哇！真棒。这正是我想要的。我不敢相信它已经解决了。谢谢，伙计，非常感谢。我们已经做了很长时间了，但这是一个简单的解决方案。再次感谢。欢迎。我知道你已经将此标记为已解决，但在进一步修改后
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' });
    });
});

$(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' });
    });
});