Question

我正在尝试在我的网络应用中为我的弹出窗口添加一个“最小化”按钮。当弹出窗口出现时，它们会附加到正文中。当我点击最小化时，我希望它们被附加到页面底部的透明div中，因此最小化的弹出窗口并排显示为内嵌块元素而不是彼此叠加。当我再次点击最小化按钮时，我想从页面底部的透明div中删除弹出窗口并将其附加回主体。

<body>
<div class="le-popup"/>
<div class="le-minimized-popup-container">
</body>

单击名为“le-popup”的div上的最小化按钮，它应该附加到名为“le-minimize-popup-container”的div中。单击“le-minimize-popup-container”中弹出窗口的折叠表单上的最小化按钮，它将从“le-minimize-popup-container”中删除并附加回正文。

我知道有.jove函数，如.remove（）和.detach（）。我认为后者在不破坏使用该方法的元素的情况下返回。但是我似乎无法找到一种方法，在附加到其他东西之前，将某些东西附加到它所附加的节点上。有意义吗？

THX - Gaweyne。

编辑：

var $leMinimizeButton = $('<div class="minimize"/>').append($lePopup).click(_.bind(function(){
   $lePopup.toggleClass('minimize'); // Adds a class which collapses the body of the popup, giving it a minimized appearance and moves it to the bottom of the page.
}, this))

到目前为止我都有。问题是弹出窗口只是以这种方式叠加在一起。想做我上面解释的事情。

Answer 1

.append应该已经做了你想做的事。来自文档：

您还可以在页面上选择一个元素并将其插入另一个元素：
$( ".container" ).append( $( "h2" ) ); 
如果以这种方式选择元素将被插入到DOM中其他位置的单个位置移入目标（未克隆）

.appendTo也遵循这一理念。因此，如果我正确理解您的问题，您可以进行以下更改：

var $leMinimizeButton = $('<div class="minimize"/>').append($lePopup).click(_.bind(function(){
   if ($lePopup.hasClass("minimize")) {
       $lePopup.removeClass('minimize')
               .appendTo(".le-popup");
   }
   else {
       $lePopup.addClass('minimize')
               .appendTo(".le-minimized-popup-container");
   }
}, this))

div中没有出现的元素并将它们附加到最初附加的位置？

1 个答案:

div中没有​​出现的元素并将它们附加到最初附加的位置？

1 个答案:

div中没有出现的元素并将它们附加到最初附加的位置？