在单击的按钮下方连续显示 div [关闭]答案

【问题标题】：Show div in a row just below clicked button [closed]在单击的按钮下方连续显示 div [关闭]
【发布时间】：2021-04-14 12:32:10
【问题描述】：

所以我有很多按钮。我使用了 flex-box。

棘手的部分是我不知道如何将绿色块放置在新行上的按钮之后。带有绿色的按钮表示我点击了它。

我想过这样做：我们可以以某种方式跟踪一行中的最后一个元素（单击按钮的位置），然后添加一个宽度为 100% 的新元素，以便它在按钮。

点击将使用 jquery 完成。

我没有代码给你分享但是我其实不需要你写代码，我怎么做的解释就足够了。谢谢。

【问题讨论】：

如果你想切换一些东西，我使用了一个很酷的小技巧，可以在 vanilla Javascript 中完成，因此可以使用任何围绕它的框架来完成。 1. 将变量定义为布尔值。 let toggle = false 2. 编写一个函数，将变量重新定义为与自身相反的变量。 function myFunction() { toggle = !toggle } 3. 编写 if 语句，根据布尔值 if (toggle === true) { do this } else { do this instead } 执行某些操作，希望对您有所帮助。

标签： javascript html jquery css flexbox

【解决方案1】：

您需要知道单击的按钮属于哪一行。

一种方法是获取点击按钮的.offsetTop。然后，循环遍历每个按钮，直到找到具有更大.offsetTop 值的按钮（这意味着该按钮位于新行中）。当你找到它时，在这个按钮之前插入你的块。

$('.btn').click((e) => {
    let offsetTop = e.target.offsetTop;
    let buttons = $('.btn');
    for (let i=0; i<buttons.length; i++) {
        if (buttons[i].offsetTop > offsetTop) {
            $('.insert').insertBefore(buttons[i]);
            return;
        }
    }
    //clicked button was in last row
    $('.insert').insertAfter(buttons[buttons.length - 1]);
})

这是一个有效的小提琴：https://jsfiddle.net/mxrw1ofL/

【讨论】：

哇，这个不错。但它冻结了我的电脑。
我觉得只是jsfiddle的问题。
它不会冻结，谢谢
请注意代码中的一些编辑（如果单击的按钮在最后一行）。检查新的小提琴。