在 jquery 中分离和附加 div 作为对话框

Question

我有一个带有一些 id 的 div，其中包含一些按钮/标签。它本身就是一个容器。我想要一个按钮，当用户单击该按钮时，对话框必须以相同的 div 出现，但 div 必须从页面中消失。因此，当单击“分离”按钮时，会出现一个带有该 div 的对话框，并且按钮会变为“附加”。单击附加时，对话框消失，页面上出现常规 div。

这是我到目前为止所尝试的，它仅在单击分离时有效，如果单击附加对话框关闭但常规 div 不显示。

   $(document).on('click', '#detach', function() {
      var button = $(this).text();
          if (button == 'Detach') {
           $('.search_div_box').dialog({ autoOpen: false, width: 700 });
           $('.search_div_box').dialog('open');
              $(this).html('Attach');
          } else if (button == 'Attach') {
             $('.search_div_box').dialog('close');
             $(this).html('Detach');
          }

      });

我知道我在附加部分丢失了一个代码，它只会关闭对话框，但我尝试了各种方法，比如再次将 div 附加到正文等等，但没有奏效。谢谢

Answer 1

试试这个：

html:

<button id="button">Attach</button>

javascript (jquery)：

$("#button").click(function() {
    var button = $(this).html();
    if (button === "Attach") {
        $('.search_div_box').dialog('close');
        $(this).html('Detach');
    }
    else {
        $('.search_div_box').dialog({ autoOpen: false, width: 700 });
        $('.search_div_box').dialog('open');
        $(this).html('Attach');
    }
});

应该可以的:)

Answer 2

试试这个：

HTML

<button class="content detach"></button>

CSS

.content.detach:after {
   content: "Detach";
}
.content.attach:after {
   content: "Attach";
}

JS

    $('.search_div_box').dialog({ autoOpen: false, width: 700 });
$(".content, .ui-dialog-titlebar-close").on("click", function(){
    if ($(".content").hasClass("detach")) {

        $('.search_div_box').dialog('open');
    } else {
        $('.search_div_box').dialog('close');
    }

    $(".content").toggleClass("detach attach");
});

演示： http://jsfiddle.net/n8Mbz/

Answer 3

您可以使用 jQuery 的 $.clone() 创建 div 的副本，然后将其与对话框一起显示/隐藏，如下所示：

var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
    $clone.dialog({
            autoOpen: false,
            width: 700,
        });

$(document).on('click', '#detach', function() {
    var button = $(this).text();

    if (button == 'Detach') {
        $original.hide();
        $clone.dialog('open');

        $(this).html('Attach');
    } else if (button == 'Attach') {
        $original.show();
        $clone.dialog('close');

        $(this).html('Detach');
    }
});​

JSFiddle Here