jQuery-克隆选项卡，但保持原始隐藏？

Question

I am cloning a JQuery UI Dialog with Nested UI Tabs. I need to hide the original Tabs elements (or have them offscreen), but still be able to clone and show the cloned Tabs. Any ideas?

<div class="dialog">
                <div class='tabs'>
                    <ul>
                        <li data-type="presentations"><a href="#presentations">Presentations</a>
                        </li>
                        <li data-type="outcomes"><a href="#outcomes">Learning Outcomes</a>
                        </li>
                        <li data-type="conditions"><a href="#conditions">Core Conditions</a>
                        </li>
                    </ul>
                    <div id="presentations"></div>
                    <div id="outcomes"></div>
                    <div id="conditions"></div>
                </div>
            </div>
      <button id='button'>Create Tabs</button>

and

//$('.tabs').hide();

$('#button').click(function() {
  $('.dialog').clone().appendTo('body').removeClass( 'dialog' ).tabs();
});

Fiddle

If this is not feasible, then I guess a fall back would be to create the tabs dynamically.

Answer 1

Add display: none to the class dialog in your .css file:

.dialog {
    display: none;
}